MIS 腳印

記錄 IT 學習的軌跡

CSS 組合選擇器 (Selectors) 教學範例

使用 CSS 組合選擇器 (Combinator selectors) 的後代選擇器、子選擇器、相鄰兄弟選擇器與一般兄弟選擇器來選取元素,並使用範例說明。


CSS 組合選擇器列表

選擇器名稱說明CSS
E F
後代選擇器選取 E 元素的後代 F 元素1
E > F子選擇器選取 E 元素的子 F 元素2
E + F相鄰兄弟選擇器選取 E 元素之後的第一個兄弟 F 元素2
E ~ F一般兄弟選擇器選取 E 元素之後的所有兄弟 F 元素2

範例

後代選擇器 E F

選取 <div> 元素的後代 <p> 元素:

div p {
    background-color: skyblue;
}
<div>
    <p>div p</p>

    <div>
        <p>div div p</p>
    </div>
</div>

<p>p</p>
div p
div div p
p

子選擇器 E > F

選取 <div> 元素的子 (向下第一層) <p> 元素:

div > p {
    background-color: skyblue;
}
<div>
    <p>div p</p>

    <h6>
        <p>div h6 p</p>
    </h6>
    
    <p>div p</p>
</div>

<p>p</p>
div p
div h6 p
div p
p

相鄰兄弟選擇器 E + F

選取 <h6> 元素之後的相鄰 (第一個) 兄弟 <p> 元素 :

h6 + p {
    background-color: skyblue;
}
<p>p</p>
    
<h6>h6</h6>

<p>p</p>

<p>p</p>
p
h6
p
p

一般兄弟選擇器 E ~ F

選取 <h6> 之後的所有兄弟 <p> 元素:

h6 ~ p {
    background-color: skyblue;
}
<p>p</p>
    
<h6>h6</h6>

<p>p</p>

<p>p</p>
p
h6
p
p

發表迴響