没有任何孙元素的元素的CSS

Question

如何为没有任何孙元素的元素指定CSS？例如

<div class="foo">
   <ul></ul>
</div>
<div class="foo">
   <ul><li></li></ul>
</div>
// hide the <div> whose child <ul> is empty, how?
div.foo {
   display: none;
}

Answer 1

嘿，css中有一个:empty选择器，可以让你这样做。

Javascript方法来获得您所要求的内容

但是，如果你想隐藏其他东西，你应该使用javascript

:has是实验性的一种简单的方法

let text = document.querySelector("div.foo > ul");
if(text.innerHTML == ""){
// set your things
document.querySelector("div.foo").style.display = "none";
// you can delete this thing too but this is just an examplee
}

使用：空选择器

如果你不想使用javascript，那么这个方法也是很好的

只需使用

div > ul:empty{
display:none; // or any styles that you can see
}

仅供说明：

div.foo > ul{
background-color:blue;
height:30px;
}
div.foo > ul:empty{
display:none;
}

<!-- Below is empty ul -->
<div class="foo">
<ul></ul>
</div>
<!-- Below is non empty ul -->
<div class="foo">
<ul>
<li>This is with  text</li>
</ul>
</div>

但要小心

空元素是指其中什么都没有的元素。它甚至不能有空白。

有一种叫做:blank的东西，但据我所知，它是实验性的。