：如果有空格则empty不起作用？

Question

尝试找到一个以

<div>

为目标的伪类，如下所示：

<div class="nav-previous">
                            </div>

我尝试过

:blank

和

:empty

，但都无法检测到。难道只是做不到吗？

https://jsfiddle.net/q3o1y74k/3/

Answer 1

:empty

一个人就够了。

根据当前的 Selectors Level 4 规范，:empty

 可以匹配仅包含文本节点、仅包含空格

的元素以及完全为空的元素。只是根据当前规范，支持它的人并不多。

:empty

伪类表示没有子元素的元素

除了（可选）文档空白字符。

来自

MDN：

注意：在选择器级别 4 中，

:empty

 伪类已更改为类似 

:-moz-only-whitespace

，但目前还没有浏览器支持此功能。

:-moz-only-whitespace

 CSS 伪类匹配仅包含仅包含空格的文本节点的元素。 （这包括具有空文本节点的元素和没有子节点的元素。）

Answer 2

正如其他人提到的，这对于 CSS 来说是不可能的

。 不过，您可以检查 JavaScript 是否只有空格。这是一个简单的仅 JS 解决方案，匹配的“空”div 为蓝色，而包含文本的 div 为红色。更新为向空 div 添加 empty

 类，这将允许您使用 CSS 中的选择器 

.empty

 轻松定位它们。

仅 JS 的“空”比较将如下所示：

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") 如果你使用 jQuery，那就更容易了：

if( $.trim( $(element).text() ) == "" ){

var navs = document.querySelectorAll(".nav-previous");
for( i=0; i < navs.length; i++ ){
  if(navs[i].innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "") {
    navs[i].style.background = 'blue';
    navs[i].classList.add( 'empty' );
  } else {
    navs[i].style.background = 'red';
  }
}

.nav-previous {
 padding: 10px;
 border: 1px solid #000;
}

.nav-previous.empty {
  border: 5px solid green;
}

<div class="nav-previous">
                            </div>
<div class="nav-previous">Not Empty </div>

Answer 3

:empty

确实只适用于

完全空元素。空白内容意味着它不为空，单个空格或换行符就足够了。只有 HTML 注释才被视为“无内容”。

有关更多信息，请参阅此处：

https://css-tricks.com/almanac/selectors/e/empty/

:blank

选择器正在开发中，它将匹配空白，请参见此处：

https://css-tricks.com/almanac/selectors/b/blank/。但好像还没有浏览器支持。

更新： 请参阅
此处了解涉及 jQuery 的可能解决方案。

Answer 4

你的方法的问题是你的容器实际上并不是空的。

:empty 伪类表示没有子元素的元素 全部。就文档树而言，只有元素节点和内容 节点（例如 DOM 文本节点、CDATA 节点和实体引用） 其数据长度非零必须被视为影响 空虚；

由于你有空白空间，这个伪类不会起作用。

:blank 伪类应该是正确的，因为这是它的定义：

这个空白伪类匹配只包含内容的元素 由空格组成但不为空。

问题是这个伪类还没有被任何浏览器实现，您可以在下面的链接中查看。因此，您需要等到它实现才能使用此选择器。

这几乎解释了您所面临的行为

https://css4-selectors.com/selector/css4/blank-pseudo-class/

这里最好的方法就是确保你的 div 实际上是空的，这样你的方法就会起作用。

你能做的最好的事情就是定义一个空类，如下所示：

.empty{
   display:none;
}

然后在此处添加此 JS 代码，它将把空类附加到您的空白项目中：

(function($){
    $.isBlank = function(html, obj){
        return $.trim(html) === "" || obj.length == 0;
    };

    $('div').each(function() {
        if($.isBlank(
            $(this).html(), 
            $(this).contents().filter(function() {
                return (this.nodeType !== Node.COMMENT_NODE);
            })
        )) {
            $(this).addClass('empty');
        }
    });
})(jQuery);

检查它在这里工作，

https://jsfiddle.net/29eup5uw/

Answer 5

如果没有 JavaScript/jQuery 实现，你就做不到。

:empty

 选择器适用于空标签（因此其中甚至没有 

any 空间）或自闭标签，如 <input />

。

参考：

https://www.w3schools.com/cssref/css_selectors.asp

如果你想使用 JavaScript 实现，我想你会在这里找到答案：

How do I check if an HTML element isempty using jQuery?

Answer 6

虽然不完全相同，但如果您可以安全地假设输出并考虑没有子元素作为“空”的定义，则可以在现代浏览器中利用

:has()

。

div:not(:has(> *)) {
  background: red;
}

<div>
  <!-- This will not be colorized -->
</div>

<div>
  <!-- But this will -->
  <span>Some content</span>
</div>