Question

试图找到一个像这样定位class A { constructor() { this.person = null this.create = (args) => { this.person = new Person(args) } } } class Person { constructor(person) { this.name = person.name this.age = person.age } } let a = new A() a.create({name: "Peter", age: "24"}) console.log(a)的伪类：

<div>

我已尝试<div class="nav-previous"> </div>和:blank，但都无法检测到它。这是不可能的吗？

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

Answer 1

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

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

由于你有空格，这个伪类不会做到这一点。

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

此空白伪类匹配仅包含内容的元素它由空格组成，但不是空的。

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

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

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 2

正如其他人所提到的，CSS 还不可能。您可以查看是否只有JavaScript空格。这是一个简单的JS解决方案，＆＃34;空＆＃34;匹配的div是蓝色，而有文本的div是红色。更新后，将empty类添加到空div中，这样您就可以使用CSS中的选择器.empty轻松定位它们。

只有JS＆＃34;空＆＃34;比较看起来像这样：

if(element.innerHTML.replace(/^\s*/, "").replace(/\s*$/, "") == "")

如果您正在使用jQuery，那会更容易一些：

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

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

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

更新
有关jQuery的可能解决方案，请参阅 here 。

Answer 4

你不能没有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?

：如果有空格，空的不起作用？

4 个答案: