CSS :has() 伪类配合相邻兄弟选择器（+）可实现“仅当紧邻的下一个元素存在时”才对当前元素应用样式，无需 JavaScript，兼容现代主流浏览器。
css `:has()` 伪类配合相邻兄弟选择器（`+`）可实现“仅当紧邻的下一个元素存在时”才对当前元素应用样式，无需 javascript，兼容现代主流浏览器。
在实际布局中，我们常需根据 DOM 结构的上下文动态调整样式——例如：仅当某个 <div class="div1"> 后面紧跟着一个 <div class="div2"> 时，才为 .div1 设置特殊背景色；若 .div2 缺失或被注释、移除，则样式自动失效。传统 CSS 无法反向选择“前一个兄弟”，也无法条件化检测后续节点，但现代 CSS 已通过 :has() 提供优雅解法。
✅ 正确写法如下：
.div1:has(+ .div2) {
background-color: red;
border: 2px solid #e74c3c;
}该选择器含义是：匹配所有后面直接跟随 .div2 元素的 .div1 元素。注意 :has(+ .div2) 中的 + 是相邻兄弟组合符，不可省略；它确保了结构上的紧邻关系（中间不能有其他元素或文本节点）。
? 示例 HTML（样式生效）：
立即学习“前端免费学习笔记（深入）”；
<div class="div1">我将变红（因后有 div2）</div> <div class="div2">我是 div2</div>
? 示例 HTML（样式不生效）：
<div class="div1">我保持原样（后面无 div2）</div> <p>一段无关内容</p> <div class="div2">我是 div2（但不紧邻）</div>
或
<div class="div1">我保持原样（div2 缺失）</div> <!-- div2 被注释或未渲染 -->
⚠️ 注意事项：
- :has() 目前在 Chrome 105+、Edge 105+、Safari 15.4+ 中稳定支持；Firefox 自 119 版起默认启用（需确认用户环境）；
- 不可用于 CSS 动画关键帧（@keyframes）或部分伪元素（如 ::before 的 content 中嵌套 :has）；
- 避免过度嵌套 :has()（如 :has(+ :has(+ ...))），可能影响性能与可维护性；
- 它不触发重排（reflow），但复杂 :has() 条件仍建议结合 will-change 或性能监控使用。
? 进阶提示：你还可以扩展逻辑，例如检测是否存在任意后续兄弟（不限类型）：
.div1:has(+ *) { /* 后面至少有一个兄弟元素 */ }或检测多个可能的后续元素：
.div1:has(+ .div2, + .div3) { /* 后接 div2 或 div3 均触发 */ }总之，:has(+ selector) 是现代 CSS 实现“结构感知样式”的关键能力，让样式真正响应 DOM 关系，显著减少对 JavaScript 的依赖，提升页面轻量化与可访问性。
