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

CSS

使用 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> 元素。

CSS:

div p {
    background-color: skyblue;
}

HTML:

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

CSS:

div > p {
    background-color: skyblue;
}

HTML:

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

CSS:

h6 + p {
    background-color: skyblue;
}

HTML:

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

<p>p</p>

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

一般兄弟選擇器 E ~ F

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

CSS:

h6 ~ p {
    background-color: skyblue;
}

HTML:

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

<p>p</p>

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

發表留言