什么是后代選擇器？

后代選擇器又稱為“子選擇器”（Descendant Combinator）是 CSS 中的一種選擇器，用于選擇某個(gè)元素的后代元素。它通常用一個(gè)空格（" "）表示。如果第二個(gè)選擇器匹配的元素具有與第一個(gè)選擇器匹配的祖先元素（可以是父元素、祖父元素等），則后代選擇器會(huì)選擇這些元素。

語法

selector1 selector2 {
  /* 屬性聲明 */
}

示例

/* 選擇 "my-things" 列表中的列表項(xiàng) */
ul.my-things li {
  margin: 2em;
}

HTML 示例

<ul>
  <li>
    <div>項(xiàng)目 1</div>
    <ul>
      <li>子項(xiàng) A</li>
      <li>子項(xiàng) B</li>
    </ul>
  </li>
  <li>
    <div>項(xiàng)目 2</div>
    <ul>
      <li>子項(xiàng) A</li>
      <li>子項(xiàng) B</li>
    </ul>
  </li>
</ul>

結(jié)果

在這個(gè)示例中，所有嵌套在 ul.my-things 列表中的 li 元素都會(huì)應(yīng)用 margin: 2em; 樣式。

后代選擇器的使用場(chǎng)景

后代選擇器在 CSS 中非常有用，特別是在需要為嵌套元素應(yīng)用特定樣式時(shí)。例如，你可能希望為列表中的子列表項(xiàng)應(yīng)用不同的樣式，而不會(huì)影響其他列表項(xiàng)。

示例代碼

/* 為所有列表項(xiàng)設(shè)置圓點(diǎn)樣式 */
li {
  list-style-type: disc;
}

/* 為嵌套的列表項(xiàng)設(shè)置圓形樣式 */
li li {
  list-style-type: circle;
}

規(guī)范

• Selectors Level 4: Descendant combinators

瀏覽器兼容性

后代選擇器在所有現(xiàn)代瀏覽器中都得到了廣泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

相關(guān)資源

• CSS 組合選擇器教程
• CSS 選擇器參考

編程獅相關(guān)課程推薦

如果你想深入學(xué)習(xí) CSS，可以查看編程獅上的 CSS 入門課程，這些課程涵蓋了 CSS 的基礎(chǔ)知識(shí)到高級(jí)技巧，幫助你全面提升 CSS 技能。