携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
在MDN上对 :empty伪类 的解释 ：
:empty CSS 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。
注释或处理指令都不会产生影响。
实际场景
- 有时候我们请求数据的时候会遇到请求数据为空，这时候我们可以用 :empty伪类来提醒用户
<!--html-->
<h1>CSS :empty伪类</h1>
定位：<div class="emptyContent"></div>
<!--css-->
.emptyContent:empty::before{
content: "暂无数据";
}
- 隐藏空元素，让页面布局更加美观
<!--html-->
<h1>CSS :empty伪类</h1>
定位：<div class="emptyContent"></div>
<!--css-->
.emptyContent:empty{
display: none;
}
注意
:empty伪类表示如果标签内容为空，那么内容区域如果带有空格，则样式不会生效- 内容也不能有换行，因为换行会被解析成空格
- 只有
:empty伪类则只能修改样式，如果要用里面添加文字或者图片则要借助:before和:after
<!--html-->
<h1>CSS :empty伪类</h1>
<ul> </ul>
<div><!--注释--></div>
<!--css-->
ul:empty {
background: blue; //没有改变，因为ul的子元素有空格
}
div:empty {
background: blue; //当内容为注释时不影响:empty伪类，颜色变为蓝色
}
:scope伪类
在MDN上对 :scope 的解释 ：
:scope 属于 CSS伪类，它表示作为选择器要匹配的参考点的元素。
当前，在样式表中使用时，:scope 等效于 :root，因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用，如（querySelector(), querySelectorAll(), matches(), 或 Element.closest(), :scope 匹配你调用 API 的元素。
实际场景
- 直接在css中使用，则
:scope代表的是根元素
<div id="app">hello world</div>
<!--css-->
:scope {
background-color: lime;
}
- 当从 DOM API 使用，可以查找直接子元素
在代码中:scope 匹配到的是<ul>的元素，通过':scope > li' 来查找<ul>的子元素<li>
