如何样式div没有任何元素在它?



我想知道我是否可以在CSS中选择一个没有任何元素的div

例如:

HTML:

<body>
<!-- div with some elements inside of it -->
<div>
...
</div>
<!-- divs with nothing inside of them -->
<div></div>
<div></div>
<div></div>
<div></div>
</body>

如果这是我的HTML代码的body,我想选择最后四个空div。

提前感谢!🙏

可以使用:empty伪类。它表示任何没有子元素的元素。MDN

section{
display:flex;
}
div {
width: 50px;
height: 50px;
background: red;
margin: 10px;
}
div:empty {
background: black;
}
<section>
<!-- div with some elements inside of it -->
<div>
Text Text Text
</div>
<!-- divs with nothing inside of them -->
<div></div>
<div></div>
<div></div>
<div></div>
</section>

最新更新