CSS兄弟选择器两种类型详解

CSS兄弟选择器是精准控制同级元素样式的强大工具，其中相邻兄弟选择器（A + B）严格限定只匹配紧跟在A后的第一个B元素，确保样式应用的精确性；而通用兄弟选择器（A ~ B）则更灵活，能选中A之后所有同级B元素，无论中间隔了多少其他兄弟节点——掌握这两者，你就能在复杂HTML结构中高效、优雅地实现条件化样式布局，告别冗余类名和JavaScript干预。

如果您在编写CSS样式时需要针对特定元素之后的同级元素进行样式控制，但这些元素并非直接相邻或存在特定关系，可以使用CSS兄弟选择器来实现精准匹配。以下是两种常见的兄弟选择器类型及其应用方式。

本文运行环境：MacBook Pro，macOS Sonoma

一、相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器用于选取紧接在另一元素后的同级元素，二者必须拥有相同的父元素，并且目标元素紧跟其后，中间不能插入其他元素。该选择器使用加号（+）连接两个选择器。

1、书写语法为 A + B，表示选择紧跟在A元素后的第一个B元素。

2、例如，h1 + p 会选中紧跟在h1标签后的第一个p标签，并为其添加样式。

3、若两个元素之间存在其他元素，则该选择器不会生效，确保了选择的精确性。

二、通用兄弟选择器（General Sibling Selector）

通用兄弟选择器用于选取某个元素之后的所有同级元素，只要它们共享同一个父容器，且位于指定元素之后，无论中间间隔多少其他兄弟元素均可被选中。该选择器使用波浪号（~）连接。

1、语法格式为 A ~ B，表示选择A元素之后所有符合条件的B元素。

2、例如，h2 ~ p 将选中页面中所有在h2标签之后出现的p标签，即使中间夹杂着ul、div等其他标签。

3、此选择器适用于需要批量设置某类结构样式的场景，提升样式的覆盖范围和灵活性。

今天关于《CSS兄弟选择器两种类型详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS,兄弟选择器的内容请关注golang学习网公众号！