相邻兄弟选择器“+”仅匹配紧邻前一元素且同级的首个兄弟元素，中间不能有其他节点；而“~”匹配该元素后所有同级兄弟。

相邻兄弟选择器 + 的基本用法

相邻兄弟选择器只匹配紧挨在前一个元素**后面且同级**的单个元素，不是所有后续兄弟，也不是嵌套子元素。它对 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 比你想象中更“啰嗦”。

https://www.php.cn/faq/2034613.html