CSS 組合選擇器 (Selectors) 教學範例
E 為 Element (元素) 的簡稱，表示 HTML 的標籤名稱如 <h1> <p> <div> …F 也是 Element，在同時講解二個元素時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
本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.
