CSS - 伪类 :scope

CSS 伪类:scope 代表用作参考点的元素，允许选择器访问给定范围内的元素。此功能对于模块化和基于组件的 Web 开发尤其宝贵。

通过使用:scope，CSS 样式可以包含在文档的特定子树中，防止它们影响该范围之外的其他元素。
这种隔离确保特定组件的样式不会与同一页面上其他组件的样式冲突或被覆盖。
这种模块化提高了代码的可维护性，并降低了在复杂的 Web 应用程序中出现意外样式冲突的可能性。

语法

:scope {
    /* css declarations */
}

CSS :scope - 基本示例

以下示例演示了:scope 伪类的用法。

<html>
<head>
<style>
   :scope h1 {
   color: red;
   background-color: lightblue;
   font-size:50px
   }
   :scope p {
   color: blue;
   background-color: beige;
   font-size:20px
   }
</style>
</head>
<body>
   <div>
   <h1>This is a heading</h1>
   </div>
   <div>
   <p>This is a paragraph</p>
   </div>
</body>
</html>

CSS :scope - 身份匹配

在样式表中使用时，:scope 与:root 相同，因为目前无法显式指定作用域元素。

与 DOM API（例如querySelector()、querySelectorAll()、matches() 或Element.closest()）一起使用时，:scope 将匹配调用该方法的元素。

示例

以下示例演示了:scope 伪类和Element.matches() 方法的用法。

:scope 伪类用于在复杂选择器中选择当前元素。
在此示例中，我们将color: red;样式应用于:scope 伪类，该伪类目标是 div 元素。
脚本中的Element.matches() 方法用于检查元素是否与特定选择器匹配。

<html>
<head>
<title>:scope and Element.matches() Example</title>
<style>
   :scope {
      color: red;
      font-size: 20px
   }
</style>
</head>
<body>
   <div>
      <p>This is a paragraph.</p>
      <ul>
         <li>This is list item 1</li>
         <li>This is list item 2</li>
         <li>This is list item 3</li>
      </ul>
   </div>
   <script>
      const listItems = document.querySelectorAll('li');
      listItems.forEach(item => {
         if (item.matches(':scope')) {
            item.style.backgroundColor = 'yellow';
         }
      });
   </script>
</body>
</html>

打印页面