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