本文详解为何 `:empty` 伪类配合 `+` 邻居选择器在嵌套结构中失效，并提供现代、语义清晰的解决方案——使用 `:has()` 伪类动态响应子元素状态变化。
在 CSS 中，:empty 伪类用于匹配不包含任何子节点（包括文本节点、元素节点或注释）的元素。但其本身不具备向上影响祖先元素的能力——这是 CSS 选择器长期存在的限制：CSS 无法原生选择父元素或祖先元素（即不存在“父选择器”）。因此，当开发者尝试通过 #inner-div:not(:empty) + #outer-container 控制嵌套结构中外部容器的样式时，逻辑必然失败。
关键原因在于 + 是相邻兄弟选择器（adjacent sibling combinator），它只匹配紧邻在前一个元素之后、且处于同一层级的下一个兄弟元素。观察两段 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 内部的其他元素，而 #outer-container 本身是其父元素，根本不在 + 的作用范围内——该选择器在此上下文中完全不匹配任何元素。
✅ 正确解法：使用 :has() 伪类（现代标准）
CSS 新增的 :has() 伪类填补了这一关键空白，允许基于后代/子元素的状态反向影响祖先元素。语法直观且语义明确：
#outer-container:has(#inner-div:not(:empty)) {
background-color: yellow;
}这段代码含义为：“选择所有包含一个非空 #inner-div 的 #outer-container 元素”。它完美契合嵌套场景需求，且无需 JavaScript 干预。
✅ 完整可运行示例：
<!DOCTYPE html>
<html>
<head>
<style>
#outer-container {
padding: 2em 0;
background-color: #CCC;
transition: background-color 0.2s ease; /* 添加平滑过渡 */
}
#inner-div {
border: 1px solid #000;
margin: 0 auto;
width: 80%;
min-height: 1.5em;
}
#outer-container:has(#inner-div:not(:empty)) {
background-color: #ffeb3b; /* 明亮黄色 */
}
</style>
</head>
<body>
<div id="outer-container">
<div id="inner-div" contenteditable="true"></div>
</div>
</body>
</html>⚠️ 注意事项与兼容性
- 浏览器支持：:has() 已被 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/css-has），覆盖全球超 95% 的桌面用户及主流移动端。如需支持旧版 IE 或早期 Android 浏览器，需降级为 JavaScript 监听 input 事件并手动切换 class。
- 性能提示：:has() 在复杂 DOM 中可能触发重排，但对单层嵌套（如本例）无明显开销；避免在深层嵌套或高频更新区域滥用。
- 不可用于 @keyframes 或 ::before/after 中：:has() 只能用于常规选择器，不支持伪元素内容生成或动画规则内。
✨ 总结
#inner-div:not(:empty) + #outer-container 失效的根本原因，是混淆了兄弟关系与父子关系。CSS 选择器始终自左向右解析，无法逆向寻址。:has() 的出现标志着 CSS 进入“关系感知”新阶段——它让样式真正具备了基于内容状态驱动布局响应的能力。在现代项目中，优先采用 :has() 实现此类逻辑，既简洁、声明式，又符合 Web 标准演进方向。
