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

Question

正在尝试找到一个伪 class 以这样的 <div> 为目标：

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

我试过:blank和:empty，但都检测不到。只是做不到吗？

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

Answer 1

:empty 确实只适用于 完全空的 元素。白色space内容表示不为空，一个space或者换行就够了。只有 HTML 条评论被认为是 'no content'.

有关详细信息，请参阅此处：https://css-tricks.com/almanac/selectors/e/empty/

:blank 选择器正在开发中，它将匹配白色space，请参见此处：https://css-tricks.com/almanac/selectors/b/blank/。不过好像还没有浏览器支持

更新：
有关涉及 jQuery.

的可能解决方案，请参阅 here

Answer 2

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

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

因为你有空格，所以这个伪 class 不会起作用。

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

This blank pseudo-class matches elements that only contain content which consists of whitespace but are not empty.

问题是这个伪 class 还没有被任何浏览器实现，您可以查看下面的 link。所以你需要等到它实现才能使用这个选择器。

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

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

这里最好的方法就是确保您的 div 实际上是空的，这样您的方法才会奏效。

你能做的最好的事情就是像这样定义一个空的 class：

.empty{
   display:none;
}

然后在此处添加此 JS 代码，它会将空 class 附加到您的空白项：

(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 3

没有 JavaScript/jQuery 实施是不行的。 :empty 选择器适用于空标签（因此甚至没有 any space）或 self-closing 标签，如 <input />.

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

如果你想使用JavaScript实现，我想你会在这里找到答案：How do I check if an HTML element is empty using jQuery?

Answer 4

正如其他人所提到的，CSS还无法做到这一点。但是，您可以检查 JavaScript 是否只有空格。这是一个简单的 JS 解决方案，"empty" 匹配的 div 是蓝色的，而有文本的 div 是红色的。已更新以向空 div 添加 empty class，这将允许您使用 CSS.

中的选择器 .empty 轻松定位它们

仅 JS "empty" 比较如下所示：

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 5

`:empty`一个人就够了

通过the current Selectors Level 4 specification，:empty可以匹配只包含文本节点的元素，只包含空格以及完全空的元素。只是根据当前规范，支持它的人并不多。

The :empty pseudo-class represents an element that has no children except, optionally, document white space characters.

来自 the MDN:

Note: In Selectors Level 4, the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no browser currently supports this yet.

The :-moz-only-whitespace CSS pseudo-class matches elements that only contain text nodes that only contain whitespace. (This includes elements with empty text nodes and elements with no child nodes.)

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

:empty doesn't work if there's blank spaces?

css

css-selectors

pseudo-class

`:empty`一个人就够了

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

:empty doesn't work if there's blank spaces?

css

css-selectors

pseudo-class

:empty一个人就够了

`:empty`一个人就够了