CSS 后代选择器指南

什么是后代选择器？

后代选择器又称为“子选择器”（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>

结果

在这个示例中，所有嵌套在 ul.my-things 列表中的 li 元素都会应用 margin: 2em; 样式。

后代选择器的使用场景

后代选择器在 CSS 中非常有用，特别是在需要为嵌套元素应用特定样式时。例如，你可能希望为列表中的子列表项应用不同的样式，而不会影响其他列表项。

示例代码

/* 为所有列表项设置圆点样式 */
li {
  list-style-type: disc;
}

/* 为嵌套的列表项设置圆形样式 */
li li {
  list-style-type: circle;
}

规范

• Selectors Level 4: Descendant combinators

浏览器兼容性

后代选择器在所有现代浏览器中都得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Internet Explorer。

相关资源

• CSS 组合选择器教程
• CSS 选择器参考

编程狮相关课程推荐

如果你想深入学习 CSS，可以查看编程狮上的 CSS 入门课程，这些课程涵盖了 CSS 的基础知识到高级技巧，帮助你全面提升 CSS 技能。