:has(+ selector) 语法合法，但仅匹配“后面紧邻该元素”的前一个兄弟，对dom顺序敏感且firefox不支持；误用常因中间存在文本节点或跨浏览器兼容性导致失效。
为什么 :has(+ selector) 根本不生效？
因为 CSS 规范里压根没有 :has(+ selector) 这种写法。:has() 伪类只接受**后代、子、兄弟（~ 或 +）等关系选择器作为其参数**，但关键在于：它本身不能“反向选中”前一个元素，更不能把 + 直接塞进括号里当语法用。你写的 :has(+ .target) 会被浏览器直接忽略——不是兼容性问题，是语法非法。
:has() 能用来选「前面有某个相邻兄弟」的元素吗？
可以，但必须把逻辑翻过来写：你要选的是「后面紧跟着 .target 的那个元素」，就得用 :has(+ .target) ——注意，+ 在 :has() 里面是合法的，但它描述的是「当前元素之后是否有一个相邻兄弟匹配 .target」，所以这个 :has() 必须作用在「前者」上。
比如想给「紧挨着 .alert 的前一个按钮」加边框，得这样写：
button:has(+ .alert) {
border: 2px solid red;
}
这表示：选所有满足「后面紧跟一个 .alert 元素」的 button。不是选 .alert 前面任意元素，而是明确限定为「相邻」且「顺序在前」的那个。
-
:has(+ .x)只匹配紧邻的下一个兄弟，不跨元素、不跳过空白节点 - 它对 DOM 顺序敏感，如果中间有注释、文本节点（哪怕只是换行），就断开相邻关系
- 目前仅 Chromium 111+、Safari 15.4+ 支持；Firefox 仍不支持（截至 2024 年中）
常见误用场景和替代方案
最典型的是想「根据后一个元素的状态控制前一个元素样式」，比如表单中错误提示在输入框下方，你想让输入框变红。这时容易写成 .input:has(+ .error) —— 这逻辑是对的，但要注意：
- HTML 结构必须严格是
<input><span class="error">...</span>，中间不能有<br>、空格换行产生的文本节点 - 若用 Flex/Grid 布局改变了视觉顺序，
+仍按 DOM 顺序判断，不是渲染顺序 - 不支持时（如 Firefox），需回退到 JS 监听或用属性标记，例如
input[data-has-error]
另一个坑是嵌套滥用：div:has(> p + .note) 看似合理，但 + 在 :has() 内部只对同级兄弟有效，> 和 + 混用易导致预期外的匹配失败。
真正安全的相邻控制方式有哪些？
如果项目需兼容老浏览器，或结构不可控，别强依赖 :has(+ ...)。更稳的做法是：
- 把状态提到父容器：用
.form-group.error > input，靠 JS 或服务端加 class - 用属性选择器配合 JS：监听
.error出现后，给前一个兄弟设data-error-next - CSS-in-JS 或构建时生成对应规则（如 PostCSS 插件预编译
:has()）
:has(+ selector) 是个有用的工具，但它的能力边界很清晰：只解决「我后面紧跟着谁」的问题，而且只在现代浏览器里可靠。一旦 DOM 中间多了一个看不见的节点，或者需要跨浏览器稳定运行，就得立刻切到更可控的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
