Question

如果您想选择没有任何孩子的节点，您可能会考虑使用:empty。同时:empty的行为非常烦人，因为任何空格都会使该规则不适用。 :blank选择器作为救世主来到这里，但还没有浏览器实现它。

你知道选择里面没有其他元素的元素的技巧吗？

只是为了激发你的想象力：像.parent:not(:scope > *)

这样的东西

Answer 1

选择器与文本节点不匹配，因此无法使用选择器模拟:blank或:empty。

从字面上看，.parent:not(:scope > *)表示不是.parent元素的子元素的任何:scope元素，无论该范围根可能是什么。如果选择器没有作用域，那么它等同于.parent:not(:root > *)，或者如果它出现在作用域样式表中，通常它意味着任何这样的元素不是代表这个作用域样式表的style元素的兄弟。

我怀疑你的意思是.parent:not(:has(> *))，它会匹配没有元素子元素的.parent元素，但它没有考虑到它们的文本内容，同样的原因我也是提及。

好消息是，虽然你仍然需要等待供应商来实现这个新功能，而不是在单独的:blank伪中实现它们，他们正在考虑修改{{1}的功能相反，只要它不会破坏太多的网站。请参阅this answer。

Answer 2

正如BoltClock所说，目前只有css无法实现这一目标 - 虽然it was given up from the CSS3 specification可以使用:contains()选择器。

我知道这不是你想要的，但这里有一个我有时使用的jQuery解决方案：

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

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

请参阅jsfiddle demo。它定位任何只有空格或注释的节点，但忽略带有子元素的元素。可能并不完美，但到目前为止它对我来说还算合适。

Answer 3

我已变得更加通用，并接受带注释的空格。

  $('*').contents().each(function() {
    if(this.nodeType === Node.COMMENT_NODE) {
      $(this).remove();
    }
  });

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

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

是否有一个css技巧来模拟CSS4：空白选择器？

3 个答案: