如何用伪类匹配仅含空白字符的div？:empty与:blank均无效

我明白你遇到的问题了——想选中那些只包含空白字符的<div>（比如<div class="nav-previous"> </div>这种），但:empty和:blank都不管用对吧？这俩伪类确实有各自的局限，我给你整理了可行的方案：

先说说为什么现有伪类不生效 #

• :empty 伪类要求元素完全没有任何内容，哪怕是一个空格、换行或者制表符都不行，所以带空白的元素根本不会被它识别。
• :blank 伪类本来就是为了解决这个问题设计的，但它目前的浏览器支持度极低，还没成为广泛可用的标准，暂时没法用于生产环境。

方案1：CSS :has() 伪类组合（现代浏览器可用） #

如果你的项目只需要兼容现代主流浏览器（Chrome、Firefox 121+、Safari 15.4+等），可以用:has()配合文本选择器来实现：

/* 选中仅含空白的.nav-previous元素 */
.nav-previous:has(:only-child:is(text)) {
  /* 这里写你需要的样式，比如隐藏 */
  display: none;
}

原理是通过:has()检查元素的唯一子元素是否是空白文本节点，以此判断元素是否仅含空白。

方案2：JavaScript 辅助标记（兼容性拉满） #

这是目前最可靠、兼容性最广的方案，适合所有浏览器。思路是通过JS检测元素内容是否仅含空白，给符合条件的元素加自定义类，再用CSS选中：

JavaScript 代码 #

// 选中所有目标div
const targetDivs = document.querySelectorAll('.nav-previous');

targetDivs.forEach(div => {
  // 去除所有空白字符后判断是否为空
  if (div.textContent.trim() === '') {
    div.classList.add('only-whitespace');
  }
});

对应的CSS #

/* 选中仅含空白的div */
.only-whitespace {
  /* 示例：隐藏这类元素 */
  display: none;
}

如果你的页面有动态加载的元素，记得在元素加载完成后再执行这段JS，或者用MutationObserver监听DOM变化，自动给新元素标记类。

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