css伪类:scope用法解析以上的:scope就代表了<div id="root">的元素，然后查询到它的子

:scope是css中的伪类，可以直接使用在样式表中，代表了根元素(一般是<HTML>元素)：

:scope {
  font-size: 20px; // 这里代表根节点字体为20px
}

也可以使用在querySelector()或querySelectorAll()中代表当前元素：

<div id="root">
  <div>child 1</div>
  <div>child 2</div>
</div>

<script>
  const root = document.getElementById('root')
  root.querySelector(':scope > div').innerText === 'child 1' // true
</script>

以上的:scope就代表了<div id="root">的元素，然后查询到它的子元素div，由于使用的querySelector()方法会返回第一个元素。