後代組合器
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
後代組合器（通常以單一空格（「 」）字元表示）結合了兩個選擇器，如此一來，如果匹配第二個選擇器的元素有一個匹配第一個選擇器的祖先元素（父元素、父元素的父元素、父元素的父元素的父元素等等），則會選取這些元素。使用後代組合器的選擇器稱為後代選擇器。
css
/* 「my-things」清單的後代清單項目 */
ul.my-things li {
margin: 2em;
}
技術上來說，後代組合器是在兩個選擇器之間，且沒有其他組合器時，由一個或多個 CSS 空白字元（空格字元和／或四個控制字元之一：回車、饋頁、換行和 Tab）所組成。此外，組成組合器的空白字元可以包含任意數量的 CSS 註解。
語法
css
selector1 selector2 {
/* 屬性宣告 */
}
範例
CSS
css
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
HTML
html
<ul>
<li>
<div>項目 1</div>
<ul>
<li>子項目 A</li>
<li>子項目 B</li>
</ul>
</li>
<li>
<div>項目 2</div>
<ul>
<li>子項目 A</li>
<li>子項目 B</li>
</ul>
</li>
</ul>
結果
規範
| Specification |
|---|
| Selectors Level 4 # descendant-combinators |
瀏覽器相容性
Loading…