好用的伪类（:empty和:scope）

<!--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 的元素。

实际场景

1. 直接在css中使用，则 :scope 代表的是根元素

<div id="app">hello world</div>

<!--css-->
:scope {
  background-color: lime;
}

1. 当从 DOM API 使用，可以查找直接子元素

代码片段

在代码中:scope 匹配到的是<ul>的元素，通过':scope > li' 来查找<ul>的子元素<li>