兩個div都是綠色的。怎么了？我只是使用子選擇器將其設定為藍色！
div.stuff {
background-color: green;
height: 250px;
}
div.stuff-child(2) {
background-color: blue;
}<div class="stuff">123</div>
<div class="stuff">abc</div>uj5u.com熱心網友回復：
div.stuff:nth-child(2){
background-color: blue;
}
uj5u.com熱心網友回復：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.stuff {
background-color: green;
height: 250px;
}
div.stuff:nth-child(2){
background-color: blue;
}
div.stuff:nth-child(3){
background-color: yellow;
}
</style>
</head>
<body>
<div class="stuff">123</div>
<div class="stuff">abc</div>
<div class="stuff">xyz</div>
</body>
</html>
uj5u.com熱心網友回復：
您可以使用以下代碼：
<div class="item-wrap">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
.item-wrap .item{ background-color: aqua; margin-bottom: 6px; height: 40px; text-align: center; font-weight: bold; }
/* Select the 2nd list item */
.item-wrap .item:nth-child(2){ background-color: bisque; }
或者
/* Select every 3rd list item starting with 2nd */
.item-wrap .item:nth-child(3n - 1){ background-color: bisque; }
或者
/* Select every 2nd child item, as long as it has class "item" */
.item-wrap .item:nth-child(2n){ background-color: bisque; }
或者
/* Select every other list item starting with 2nd */
.item-wrap .item:nth-child(even) { background-color: bisque; }
uj5u.com熱心網友回復：
在類宣告之前不需要 div 。這應該足夠了：
.stuff {
background-color: green;
height: 250px;
}
.stuff:nth-child(2) {
background-color: blue;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/489524.html
上一篇：我無法在CSS中進行2列布局