后代选择器(空格)匹配任意层级的后代,如div span选中div内所有span;2. 子代选择器(>)仅匹配直接子元素,如nav>a只作用于nav的第一层a;3. 相邻兄弟选择器(+)选中紧接的同级元素,如h1+p作用于紧跟h1后的p。

在CSS中,组合选择器用于更精确地定位HTML元素之间的关系。通过后代、子代和相邻兄弟选择器,可以灵活控制样式作用范围。下面分别介绍它们的用法与区别。
后代选择器(空格)
后代选择器使用空格分隔两个选择器,匹配指定元素内部的所有符合条件的后代元素,无论嵌套层级有多深。
例如:div span 会选中所有在 div 元素内的 span 元素,即使中间隔着其他标签。
- 语法: A B
- 含义: 选择A元素内部的所有B后代元素
-
示例:
.container p→ 所有在类为container的元素内的p标签都会被选中
子代选择器(>)
子代选择器使用大于号(>)连接,仅匹配父元素的直接子元素,不包含更深层的后代。
立即学习“前端免费学习笔记(深入)”;
比如:ul > li 只会选择 ul 的直接子级 li,不会选中嵌套在其他 li 中的 li。
- 语法: A > B
- 含义: 选择A元素的直接子元素B
-
示例:
nav > a→ 只选中nav下的第一层a标签,深层的不生效
相邻兄弟选择器(+)
相邻兄弟选择器使用加号(+),用于选择紧接在某元素后的同级兄弟元素。
注意:两个元素必须拥有相同的父元素,并且第二个元素紧跟在第一个之后。
- 语法: A + B
- 含义: 选择紧接在A元素后的第一个同级B元素
-
示例:
h1 + p→ 选中紧跟在h1后面的p标签,跳过就不生效
掌握这三种组合方式能有效提升样式控制的精准度。后代选择器适用广泛匹配,子代选择器限制层级,相邻兄弟则实现结构化布局中的特殊样式需求。基本上就这些,不复杂但容易忽略细节。










