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 技能。