相邻兄弟选择器语法是+，匹配同一父容器下紧跟其后的第一个同级元素；~是通用兄弟选择器，匹配后续所有同级元素；+对中间节点敏感，包括注释、空白文本等均会导致失效。
相邻兄弟选择器的语法是 + ，不是 ~
很多人误把通用兄弟选择器 ~ 当成“紧邻”的意思，其实它匹配的是**后面所有同级元素**，而真正表示“紧跟其后一个”的只有 +。比如 h2 + p 只会选中紧接在 h2 后面的**第一个** p 元素，跳过中间有其他标签（如 div、span）的情况。
常见错误现象：
写成 h2 ~ p 却期望只影响下一个段落，结果页面里所有后续 p 都被样式污染；或者用 h2 + div p 以为能穿透层级，但 + 只作用于**直接同级节点**，不支持嵌套。
+ 要求两个元素必须是同一父容器下的连续兄弟节点
这意味着：如果目标元素被注释、空格文本节点或其它 HTML 元素隔开，选择器就失效。浏览器解析时会把换行+缩进生成的空白文本节点也视为兄弟节点，所以以下结构中 h2 + p 实际不生效：
<h2>标题</h2> <!-- 注释 --> <p>这段不会被选中</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
实操建议：
• 确保 HTML 源码中两个元素之间**无任何其他节点**（包括注释、<script></script>、<div> 或空白文本）<br>• 若需兼容动态插入内容，建议改用 JS 判断 <code>element.nextElementSibling 是否为预期类型
• 在 Vue/React 中，JSX 编译可能自动注入注释节点，此时 CSS + 不可靠，应改用 class 控制
和 :has() 搭配能绕过“只能向后选”的限制
CSS 原生不支持“选中某个元素的前一个兄弟”，但现代浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）已支持 :has()。例如想给「后面紧跟着 .warning 的按钮」加边框，可以这样写：
button:has(+ .warning) {
border: 2px solid #f00;
}
注意点：
• :has() 内部仍要用 + 表达紧邻关系，不能写成 :has(.warning)（那是通用兄弟）
• 目前不支持在 @keyframes 或伪元素中使用 :has()
• 如果需要兼容旧版浏览器，必须降级为 JS 方案：el.nextElementSibling?.classList.contains('warning')
性能与可维护性容易被低估
+ 本身性能极好，但当它出现在复杂选择器链中（如 .container > section + article h3 + span），不仅可读性骤降，部分低版本 Safari 还会触发渲染 bug，导致样式丢失。
建议：
• 单独使用 +，避免深度嵌套（超过 3 层就该考虑加 class）
• 不要依赖它做关键布局控制（比如靠 img + figcaption 实现图文对齐），因为 DOM 变动极易破坏结构假设
• 组件化开发中，优先用 BEM 类名（如 card__image / card__caption）替代兄弟选择器，更可控也更易测试
