CSS的后代选择器和子代选择器的区别

### CSS 后代选择器与子代选择器 #### 后代选择器 (Descendant Selector) 后代选择器用于选取作为某个元素后代的元素。这意味着被选中的元素可以位于指定祖先元素内的任意嵌套层次。 语法结构如下： ```css ancestor descendant { /* styles */ } ``` 例如，在HTML文档中有如下的结构： ```html <div> <section> <article> <p>这是一个段落。</p> </article> </section> </div> ``` 如果想要设置`<p>`标签样式，可以通过下面的方式定义后代选择器来实现： ```css div p { color: blue; } ``` 这会使得所有处于`<div>`内部的`<p>`标签文字颜色变为蓝色，无论它们之间有多少层其他标签[^2]。 #### 子代选择器 (Child Selector) 相比之下，子代选择器仅匹配直接属于特定父级的第一个级别的子节点。它通过大于号 `>` 来表示这种父子关系。 其基本形式为： ```css parent > child { /* styles */ } ``` 继续以上述例子为例，如果我们只希望影响那些直接由`<div>`包裹的一级子元素，则应该这样写： ```css div > section { background-color: yellow; } ``` 这段代码只会改变紧接在`<div>`之后的第一层`<section>`背景色为黄色，并不会作用于更深层次的子孙元素上。 综上所述，两者的主要差异在于应用范围的不同：一个是针对整个家族树中所有的后代成员；另一个则严格限定于直系亲子间的联系。