1. 給開發者的 Web 技術文件
  2. CSS
  3. Reference
  4. Selectors
  5. 後代組合器

此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。

View in English Always switch to English

後代組合器

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

瀏覽器相容性

參見

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content