我有一個div，在這個div裏面有一個帶有背景和文本的圖標。許多元素的css活動狀態
當點擊這個div我想改變3件事： div背景，圖標背景和文字顏色。 我怎樣才能用CSS做到這一點？
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
類只需添加到父被點擊它，然後寫更具體的CS該類。
下面是一個正在運行的示例。
document.querySelector(".click").addEventListener("click", function() {
this.classList.toggle("clicked");
});.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.clicked.click{
background: green;
}
.clicked .icon{
background: red;
}
.clicked .text{
color: blue;
}<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>未標記爲javascript – santon
這是僅適用於CSS不同的解決方案，但你必須點擊每一個元素：
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.click:focus{
background: red;
}
.icon:focus{
background: grey;
}
.text:focus{
background: black;
}<div class="click" tabindex="1">
<div class="icon" tabindex="2"></div>
<div class="text" tabindex="3">text</div>
</div>有一個關於一個偉大的解釋不用JS就可以得到tabindex和:focus。檢查出來impressivewebs
到的最佳方式保持點擊狀態，沒有的JavaScript是
<label>input checkbox+*:checked目標任何第一下一個同級元件和改變樣式相應+*的內部元件相同的規則：/* DEFAULT STYLES */
.div{
width: 200px;
height: 100px;
background: blue;
margin:10px;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
/* HIDE CHECKBOX HELPER */
label.click > input{ /* hide the input checkbox */
position:absolute;
visibility:hidden;
}
/* ACTIVE STYLES */
label.click > input:checked +* { /* (the next .div) */
background: #000;
}
label.click > input:checked +* .icon{
background: #c0ffee;
}
label.click > input:checked +* .text{
color: #f00ba4;
}<label class="click">
<input type="checkbox"> <!-- :checked state changes +div styles -->
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>
<label class="click">
<input type="checkbox">
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>
也許[本]（https://jsfiddle.net/g1nrye8e/1/）？ – lmgonzalves
添加一個很好的參考鏈接，討論各種選項。 http://tympanus.net/codrops/2012/12/17/css-click-events/ – santon