本文详解为何 css `:empty` 配合 `+` 相邻兄弟选择器在嵌套结构中失效，并提供现代、语义清晰的解决方案——使用 `:has()` 伪类精准实现“子元素非空时改变父容器样式”的需求。
CSS 的 :empty 伪类用于匹配不包含任何子节点（包括文本节点、元素节点或注释）的元素，但它本身不具备“向上影响祖先”的能力。当开发者尝试用 #inner-div:not(:empty) + #outer-container 控制嵌套结构中的父容器背景色时，样式失效的根本原因在于：+ 是相邻兄弟选择器（Adjacent Sibling Combinator），它仅能选择同级且紧邻其后的兄弟元素，而无法跨越父子层级。
在第一个可工作的示例中，HTML 结构为：
<div id="inner-div" contenteditable></div> <div id="outer-container"></div>
此时 #outer-container 确实是 #inner-div 的下一个相邻兄弟，因此 #inner-div:not(:empty) + #outer-container 能正确匹配并应用黄色背景。
但在嵌套结构中：
立即学习“前端免费学习笔记（深入）”；
<div id="outer-container"> <div id="inner-div" contenteditable></div> </div>
#inner-div 已成为 #outer-container 的子元素，而非其兄弟。此时原选择器 #inner-div:not(:empty) + #outer-container 实际试图查找“#inner-div 后面紧邻的、ID 为 outer-container 的兄弟元素”，而该元素根本不存在——导致规则完全不生效。
✅ 正确解法：使用 :has() 伪类（CSS Selectors Level 4）
:has() 是首个支持“父元素基于子元素状态进行条件匹配”的原生 CSS 机制，语法直观、语义明确：
#outer-container:has(#inner-div:not(:empty)) {
background-color: yellow;
}该规则表示：“选择所有内部包含一个非空 #inner-div 的 #outer-container 元素”。它完美契合嵌套场景下的逻辑需求。
⚠️ 浏览器兼容性注意事项（截至 2024 年）：
- ✅ 已全面支持：Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+
- ⚠️ 不支持旧版浏览器（如 IE、Chrome
const updateParentStyle = () => { outer.classList.toggle('has-content', inner.textContent.trim() !== ''); };
inner.addEventListener('input', updateParentStyle); updateParentStyle(); // 初始化
? 小结： - `:empty` 与 `+` 组合仅适用于**平级兄弟关系**，不可用于父子控制； - `:has()` 是解决“父依赖子状态”问题的标准、声明式方案，代码更简洁、可维护性更高； - 实际项目中建议通过 [caniuse.com/css-has](https://caniuse.com/css-has) 核查目标用户环境，并按需添加渐进增强策略。
