17370845950

后代选择器通过空格选中任意层级的嵌套元素，如.container p{}会影响所有后代p元素；而子选择器用>仅作用于直接子元素，需注意作用范围避免样式冲突。

在 CSS 中，后代选择器用于选中某个元素内部的所有后代元素，而不仅仅是直接子元素。它通过在两个选择器之间添加一个空格来实现。

后代选择器的基本语法

格式为：父元素 后代元素 { 样式声明 }
这里的“后代元素”可以是任意层级嵌套在“父元素”内的元素，不管嵌套多深，都会被选中。

例如：

如果你想选中 .container 内部所有的 p 元素，包括嵌套在 section 中的，可以这样写：

上面这条规则会将两个 p 元素的文字都变成蓝色，因为它们都是 .container 的后代。

与子选择器的区别

注意不要混淆后代选择器和子选择器：

• .parent .child：后代选择器，选中所有层级的后代
• .parent > .child：子选择器，只选中直接子元素，不包含更深层级

比如你只想给 .container 的直接子级 p 设置样式，就要用子选择器：

这时只有第一个 p 会被加粗，嵌套在 section 里的不会受影响。

实用建议

使用后代选择器时要注意作用范围较广，容易意外影响深层嵌套的元素。在结构复杂的页面中，建议结合类名或使用更具体的选择器来控制样式范围。

基本上就这些，掌握空格的使用是关键。