相邻兄弟选择器“+”仅匹配紧邻前一元素且同级的首个兄弟元素，中间不能有其他节点；而“~”匹配该元素后所有同级兄弟。
相邻兄弟选择器 + 的基本用法
相邻兄弟选择器只匹配紧挨在前一个元素**后面且同级**的单个元素，不是所有后续兄弟，也不是嵌套子元素。它对 HTML 结构敏感，一旦中间插入其他标签或注释，就会断开匹配。
-
A + B表示：选中所有紧跟在A元素之后、且与A同属一个父容器的B元素 - 必须是“立即后继”，中间不能有其他元素（包括文本节点、注释、空格换行在某些解析场景下也可能干扰）
- 不支持跨层级，
div + p不会匹配p，因为p是子元素，不是兄弟
+ 和 ~ 的关键区别在哪
很多人混淆相邻兄弟（+）和普通兄弟（~）。它们都要求同级，但匹配范围完全不同：
-
A + B：只选 **第一个** 紧邻的B -
A ~ B：选 **所有** 在A后面的同级B（不管隔了多少个其他兄弟） - 例如：
h2 + p只给紧跟在h2后面的那个p加样式；而h2 ~ p会让该h2后面所有同级p都生效
实际使用中容易失效的几种情况
写对了选择器却没效果？大概率掉进了这些坑里：
立即学习“前端免费学习笔记（深入）”；
- HTML 中
A和B不在同一个父容器下——比如A在B在里，无法匹配 - DOM 中
A和B之间有注释节点（）或空文本节点（如换行缩进产生的空白），部分浏览器（尤其是旧版）会将其视为真实兄弟节点，导致+断链 - 动态插入元素时，用 JS 新增的
B如果不是紧跟在已存在的A后，也不会被选中——选择器不会“回溯”已渲染的A去找后来者 -
伪元素（如
::before）或匿名文本节点（纯文字内容）会破坏相邻关系，例如：span + strong在abc def中可能不生效，因为中间有空格文本节点
一个可靠验证的 HTML + CSS 示例
把下面代码粘贴进 HTML 文件直接打开，能清晰看到 + 的作用边界：
标题一
这是紧跟其后的段落 —— 会变红加粗
中间有个 div这个段落不会被 h2 + p 选中
这会被 h2 ~ em 选中另一个段落
这个也会被 h2 ~ em 选中
真正要注意的是结构洁癖：想靠 + 控制样式，就得确保 DOM 层级干净、兄弟间无干扰节点。很多“失效”问题，其实不是选择器写错了，而是 HTML 比你想象中更“啰嗦”。
