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

【问题标题】：:empty doesn't work if there's blank spaces?:empty 如果有空格不起作用？
【发布时间】：2018-08-28 08:22:18
【问题描述】：

试图找到一个以<div> 为目标的伪类，如下所示：

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

我试过:blank 和:empty 但都检测不到。难道就做不到吗？

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

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

正如其他人提到的，这在 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

更多信息请看这里：https://css-tricks.com/almanac/selectors/e/empty/

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

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

【讨论】：

我确实阅读了:blank 我只是不知道它还没有出来。是否有类似:blank 的javascript 解决方案？

【解决方案4】：

你不能没有 JavaScript/jQuery 实现。 :empty 选择器适用于空标签（因此其中甚至没有 any 空格）或像 <input /> 这样的自闭合标签。

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

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

【讨论】：