CSS :empty伪类在嵌套DIV中失效问题咨询

核心原因 #

你之前能用相邻兄弟选择器实现效果，是因为#inner-div和#outer-container是同级兄弟元素，#inner-div:not(:empty) + #outer-container这种选择器能精准匹配到相邻的兄弟容器。但嵌套之后，#inner-div变成了#outer-container的子元素，CSS里的相邻兄弟选择器（+）、通用兄弟选择器（~）都只能作用于同级元素，根本无法穿透层级去选择父元素，所以原来的代码完全失效。

另外补充个细节：可编辑元素的:empty伪类会把空格、换行这类空白字符也算作“非空”，如果要严格判断有没有有效内容，建议结合trim()处理或者用:blank伪类（后者支持度稍差）。

解决办法 #

方法1：用CSS :has() 伪类（推荐，现代浏览器支持） #

:has()是CSS的父选择器，能让父元素根据子元素的状态应用样式，完美适配嵌套场景。代码如下：

#outer-container:has(#inner-div:not(:empty)) {
  background-color: yellow;
}

目前Chrome、Edge、Safari稳定版都支持has()，Firefox需在about:config里开启layout.css.has-selector.enabled，后续稳定版会默认支持。

方法2：JavaScript 兜底（兼容旧浏览器） #

如果要兼容不支持:has()的旧浏览器，用JS监听输入事件来控制父容器的样式：

const inner = document.getElementById('inner-div');
const outer = document.getElementById('outer-container');

// 初始化状态
updateOuterBg();
// 监听输入事件
inner.addEventListener('input', updateOuterBg);

function updateOuterBg() {
  // 去掉空白字符判断是否有有效内容
  const hasContent = inner.textContent.trim() !== '';
  outer.classList.toggle('yellow-bg', hasContent);
}

对应的CSS：

.yellow-bg {
  background-color: yellow;
}

内容的提问来源于stack exchange，提问作者jookyone