CSS :has() 伪类实现父元素根据子元素状态动态样式控制

本文详解为何 css `:empty` 配合 `+` 相邻兄弟选择器在嵌套结构中失效，并提供现代、语义清晰的解决方案——使用 `:has()` 伪类精准控制父容器样式。

CSS 中的 :empty 伪类用于匹配 完全不含子节点（包括文本节点、元素节点、注释等）的元素，但它本身不具备“向上影响祖先”的能力。而问题中失效的关键，在于误用了 相邻兄弟选择器 +。

在第一个示例中，HTML 结构为平级：

此时 #inner-div:not(:empty) + #outer-container 能生效，是因为 #outer-container 确实是 #inner-div 的 紧邻后继兄弟元素。

但当结构改为嵌套：

立即学习 “ 前端免费学习笔记（深入）”；

#inner-div 的下一个兄弟（即 + 所要求的）并不存在——它的父元素 #outer-container 是 祖先而非兄弟，因此原选择器完全不匹配，样式自然不会应用。

✅ 正确解法：使用 :has() 伪类（CSS Selectors Level 4）

:has() 是首个支持“子向父反向条件判断”的原生 CSS 机制，语法为 E:has(F)，表示“匹配包含符合 F 条件子元素的 E 元素”。它完美适用于本场景：

#outer-container {padding: 2em 0;   background-color: #CCC;   transition: background-color 0.2s ease; /* 建议添加过渡效果 */}  #inner-div {border: 1px solid #000;   min-height: 1.5em; /* 避免高度塌陷，提升可编辑体验 */}  /* 当 outer-container 内部存在非空的 inner-div 时，改变背景 */ #outer-container:has(#inner-div:not(:empty)) {background-color: yellow;}

? 注意事项：

• ✅ 浏览器 兼容性：截至 2024 年，:has() 已被 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/css-has），主流现代浏览器均可放心使用；
• ⚠️ 不支持回退：:has() 不可被 @supports 安全检测（因历史原因），若需兼容旧浏览器（如 IE 或旧版 Safari），必须搭配 JavaScript 检测并降级（例如监听 input 事件切换 class）；
• ? :empty 的严格性：

  （含空格）或

  均不为空，not(:empty) 会匹配；如需更宽松的“内容存在”判断，建议结合 JS 使用 innerText.trim() !== “”。

? 总结：CSS 无原生“父选择器”，+、~、> 等均为单向向下 / 同级关系选择器。:has() 的落地标志着 CSS 终于具备了基于后代状态驱动祖先样式的表达能力——这是解决此类嵌套响应式样式的标准、声明式、高性能方案。