什么是后代選擇器？

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

語法

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

示例

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

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>

結(jié)果

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

后代選擇器的使用場景

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

示例代碼

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

/* 為嵌套的列表項設(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ǔ)知識到高級技巧，幫助你全面提升 CSS 技能。