CSS兄弟选择器的两种类型

相邻兄弟选择器（A + B）仅选紧接在A后的第一个同级B元素，中间无其他元素；通用兄弟选择器（A ~ B）则选A之后所有同级B元素，无论间隔多少兄弟，适用于更广的样式控制场景。

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

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

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

标签： css 兄弟选择器 macbook mac macos css样式 cos