進階選擇器

後代 空格

指定子層樣式,不分階層

.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>

demo

子階 >

指定子層樣式,僅限第一層

.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>

demo

嚴謹相鄰 +

元素 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>

demo

寬鬆相鄰 ~

元素 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>

demo