CSS :has() 伪类配合相邻兄弟选择器（+）可实现“仅当指定后续元素存在时才对当前元素应用样式”，无需 JavaScript，兼容现代浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）。
css `:has()` 伪类配合相邻兄弟选择器（`+`）可实现“仅当指定后续元素存在时才对当前元素应用样式”，无需 javascript，兼容现代浏览器（chrome 105+、safari 15.4+、firefox 121+）。
在实际布局中，我们常需根据 DOM 结构的上下文动态调整样式——例如：仅当某个
后面紧跟着
时，才为 .div1 设置特殊背景色。传统 CSS 缺乏“向前探测”能力，但现代 CSS 已通过 :has() 伪类解决了这一需求。
核心语法如下：
.div1:has(+ .div2) {
background-color: red;
border: 2px solid #e74c3c;
}✅ 生效条件：仅当 .div1 元素后紧跟一个 .div2 兄弟元素时，该规则才匹配并生效。
❌ 不生效场景：
- .div2 不存在（如被移除或未渲染）；
- .div2 不是 .div1 的直接相邻兄弟（中间有其他元素，如
或注释节点）；
- 浏览器不支持 :has()（旧版 Edge、IE 等已淘汰；建议使用 caniuse.com/:has 检查目标环境）。
? 实用示例：
<!-- ✅ 匹配：.div1 后紧跟 .div2 --> <div class="div1">我将变红</div> <div class="div2">我是后续元素</div> <!-- ❌ 不匹配：中间插入了其他元素 --> <div class="div1">我不会变色</div> <p>无关内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div class="div2">虽存在，但非相邻</div> <!-- ❌ 不匹配：.div2 缺失 --> <div class="div1">我也不会变色</div>
? 进阶提示：
- :has() 支持复杂选择器，例如 .div1:has(+ .div2:hover) 可实现“仅当后继 .div2 处于悬停状态时才高亮 .div1”；
- 注意性能影响：过度嵌套或在大范围祖先上使用 :has() 可能触发重排/重绘，建议聚焦于明确、局部的选择器；
- 始终提供降级方案（如默认浅色背景），确保不支持 :has() 的环境仍保持可用性与可读性。
总结：:has(+ selector) 是现代 CSS 中实现“条件式兄弟依赖样式”的简洁、声明式解法，标志着 CSS 向更智能的结构感知迈出了关键一步。
