CSS Combinators 包括:
- 後代選擇器(Descendant Combinator): 「 」
- 子選擇器(Child Combinator):「 > 」
- 相鄰兄弟選擇器(Adjacent Sibling Combinator):「 + 」
- 一般兄弟選擇器(General Sibling Combinator):「 – 」
- 組合選擇器(Group Selector):「 , 」
1. 後代選擇器(Descendant Combinator):(空格)
- 用法:
A B
- 作用:選擇所有位於
A
元素內部的B
元素,不論它們之間有多少層嵌套。 - 例子:
<div class="container">
<p>我是第一個段落</p>
<div>
<p>我是嵌套的段落</p>
</div>
</div>
.container p {
color: red;
}
結果:選擇 .container
內的所有 p
元素,無論它們是否直接位於 .container
內。例子中,兩個 p
元素都會變成紅色。
2. 子選擇器(Child Combinator):>
語法:A > B
- 作用:選擇
A
的直接子元素B
,不會選擇後代元素(孫元素及更深層次的後代元素)。 - 例子
<div class="container">
<p>我是直接子元素</p>
<div>
<p>我是嵌套的段落</p>
</div>
</div>
.container > p {
color: blue;
}
結果:只會選擇 .container
的直接子元素 p
,即第一個 p
會變成藍色。嵌套在 div
中的第二個 p
不會被選中。
3. 相鄰兄弟選擇器(Adjacent Sibling Combinator):+
語法:A + B
- 作用:選擇緊接在
A
元素後面的相鄰兄弟元素B
,中間不能有其他元素。 - 例子
<h1>標題</h1>
<p>我是第一個段落</p>
<p>我是第二個段落</p>
h1 + p {
color: green;
}
結果:只會選擇緊接在 h1
後面的第一個 p
,即第一個 p
會變成綠色。第二個 p
不會被影響,因為它不是緊鄰的兄弟元素。
4. 一般兄弟選擇器(General Sibling Combinator):~
語法:A ~ B
- 作用:選擇
A
元素後面的所有兄弟元素B
,不要求它們緊鄰在一起。 - 例子
<h1>標題</h1>
<p>我是第一個段落</p>
<p>我是第二個段落</p>
<div>我是另一個元素</div>
<p>我是第三個段落</p>
h1 ~ p {
color: orange;
}
結果:所有位於 h1
後面的 p
元素都會變成橙色,包括第一個、第二個和第三個 p
,即使它們中間隔著其他元素(如 <div>
)。
組合選擇器(Group Selector):,
(逗號)
語法:A, B, C
- 作用:將多個選擇器組合在一起,使它們共享相同的樣式。
- 例子:
<h1>我是標題</h1>
<h2>我是副標題</h2>
<p>我是段落</p>
h1, h2, p {
color: purple;
}
結果:h1、h2 和 p 都會變成紫色,因為這三個選擇器共享相同的樣式。
6. 否定偽類選擇器(:not)(雖然不是組合器,但它常用於選擇元素時排除特定元素)
語法::not(A)
- 作用:選擇除了
A
之外的所有元素。 - 例子:
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li class="special">特殊項目</li>
<li>項目 3</li>
</ul>
li:not(.special) {
color: gray;
}
結果:除了類為 special
的 li
元素外,所有的 li
元素都會變成灰色。
7. 伺機選擇器(Universal Selector):*
語法:*
- 作用:選擇所有元素。
- 例子:
<div>
<p>段落 1</p>
<p>段落 2</p>
</div>
* {
margin: 0;
padding: 0;
color: red;
}
結果:所有的元素(包括 div
、p
等)都會把內邊距和外邊距設置為 0,並且文字顏色為紅色。
小結:所有 CSS 組合器及部分常用選擇器
- (空格):後代選擇器,選擇
A
內部的所有B
元素。 >
:子選擇器,選擇A
的直接子元素B
。+
:相鄰兄弟選擇器,選擇緊接在A
後面的兄弟元素B
。~
:一般兄弟選擇器,選擇A
之後的所有兄弟元素B
。,
:組合選擇器,將多個選擇器組合在一起,使它們共享相同的樣式。:not
:否定偽類選擇器,用來排除特定元素。*
:伺機選擇器,選擇所有元素。