進階選擇器
後代 空格
指定子層樣式,不分階層
.block .item {
background: red;
color: yellow;
}
<div class="block">
<div class="item">1</div>
<div class="item">2</div>
<div>
<div class="item">3</div>
</div>
</div>
子階 >
指定子層樣式,僅限第一層
.block > .item {
background: red;
color: yellow;
}
<div class="block">
<div class="item">1</div>
<div class="item">2</div>
<div>
<div class="item">3</div>
</div>
</div>
嚴謹相鄰 +
元素
x
之後的第一個元素y
.x-item + .y-item {
color: red;
font-size: 30px;
}
<div class="block">
<div class="x-item">X</div>
<div class="y-item">Y</div>
<div class="y-item">Y</div>
<div class="y-item">Y</div>
</div>
寬鬆相鄰 ~
元素
x
之後的元素y
.x-item ~ .y-item {
color: red;
font-size: 30px;
}
<div class="block">
<div class="x-item">X</div>
<div class="y-item">Y</div>
<div class="y-item">Y</div>
<div class="y-item">Y</div>
</div>