本文详解为何 css `:empty` 配合 `+` 相邻兄弟选择器在嵌套结构中失效，并提供现代、语义清晰的解决方案——使用 `:has()` 伪类精准控制父容器样式。
CSS 中的 :empty 伪类用于匹配完全不含子节点（包括文本节点、元素节点、注释等）的元素，但它本身不具备“向上影响祖先”的能力。而问题中失效的关键，在于误用了 相邻兄弟选择器 +。
在第一个示例中，HTML 结构为平级：
<div id="inner-div" contenteditable></div> <div id="outer-container"></div>
此时 #inner-div:not(:empty) + #outer-container 能生效，是因为 #outer-container 确实是 #inner-div 的紧邻后继兄弟元素。
但当结构改为嵌套：
立即学习“前端免费学习笔记（深入）”；
<div id="outer-container"> <div id="inner-div" contenteditable></div> </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 的严格性：<div id="inner-div"> </div>（含空格）或 <div id="inner-div"><br></div> 均不为空，not(:empty) 会匹配；如需更宽松的“内容存在”判断，建议结合 JS 使用 innerText.trim() !== ""。
? 总结：CSS 无原生“父选择器”，+、~、> 等均为单向向下/同级关系选择器。:has() 的落地标志着 CSS 终于具备了基于后代状态驱动祖先样式的表达能力——这是解决此类嵌套响应式样式的标准、声明式、高性能方案。
