如何用CSS为含空格、注释的空div元素设置样式？

这个坑我之前踩过！你遇到的核心问题是CSS :empty伪类的行为限制：它只会匹配完全没有任何内容（连空格、换行、制表符这类空白字符都不能存在）或者仅包含注释的元素。所以像<div> </div>或者<div> <!--注释--></div>这种带有空白字符的“空”div，就不会被:empty选中。

下面给你两种纯CSS的解决方案：

1. 用:blank伪类（最完美，但兼容性有限） #

CSS Selectors Level 4新增的:blank伪类就是专门解决这个问题的——它会匹配所有包含空白字符（空格、换行、制表符）、完全空、或者仅含注释的元素，完美契合你的需求：

div:blank {
  border: 1px solid #ccc;
  height: 20px;
}

⚠️ 注意兼容性：目前只有Firefox支持这个伪类，而且需要手动开启实验性特性：

• 打开Firefox的about:config页面
• 找到layout.css.blank-pseudo-class.enabled选项，把它设为true

2. 现代浏览器的折中方案（用:has()伪类） #

如果需要兼容Chrome、Edge、Safari这些现代浏览器，可以结合:not(:has(*))来选中所有没有子元素的div，再通过样式排除掉有实际文本的div（虽然CSS没法直接判断文本内容，但可以基于视觉表现做折中）：

/* 先给所有没有子元素的div加上目标样式 */
div:not(:has(*)) {
  border: 1px solid #ccc;
  height: 20px;
}

/* 给有实际文本的div移除样式（假设文本div会有自然高度，不会依赖我们设置的20px） */
div:not(:has(*)):not(:empty) {
  border: none;
  height: auto;
}

这个方案的小局限是：如果你的非空文本div刚好高度也是20px，可能会出现误判，但大部分场景下都能正常工作。

最后说一句 #

如果要兼容IE这类旧浏览器，那确实没办法绕开JavaScript——毕竟CSS目前还没有能完美识别“仅含空白内容”元素的通用方案（除了Firefox的:blank）。

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