:如果有空格,清空不起作用?

正如其他人提到的,这在CSS中是不可能的 然而 。 但是,您可以检查JavaScript是否只有空格。这里有一个简单的纯JS解决方案,匹配的“空”div是蓝色的,而有文本的div是红色的。更新以添加 empty 类设置为空div,这将允许您使用选择器轻松地将其作为目标 .empty 在CSS中。

仅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>

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

: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/

如果没有JavaScript/jQuery实现,您就无法做到这一点。 :empty 选择器使用空标记(因此没有偶数 任何 或带有自动关闭标记,如 <input /> 。

参考号: https://www.w3schools.com/cssref/css_selectors.asp

如果您想使用JavaScript实现,我想您可以在这里找到答案: How do I check if an HTML element is empty using jQuery?

:empty 确实,只适用于 完全清空 元素。空白内容意味着它不是空的,一个空格或换行符就足够了。只有HTML注释被视为“无内容”。

有关更多信息,请参阅此处: https://css-tricks.com/almanac/selectors/e/empty/

这个 :blank 选择器正在工作中,它将匹配空格,请参见此处: https://css-tricks.com/almanac/selectors/b/blank/ . 但它似乎还没有浏览器支持。

更新时间:
看见 here 对于涉及jQuery的可能解决方案。