CSS :has() 伪类配合相邻兄弟选择器（+）可实现“仅当紧邻的下一个元素存在时”才对当前元素应用样式，无需 JavaScript，兼容现代主流浏览器。
css `:has()` 伪类配合相邻兄弟选择器（`+`）可实现“仅当紧邻的下一个元素存在时”才对当前元素应用样式，无需 javascript，兼容现代主流浏览器。
在实际布局中，我们常需根据 DOM 结构的上下文动态调整样式——例如：仅当某个
后面紧跟着一个
时，才为 .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="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> <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 的依赖，提升页面轻量化与可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
