通过使用 :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>这是头部</h1>
</div>
<div>
<p>这是段落</p>
</div>
</body>
</html> CSS :scope 身份匹配
在样式表中使用时，:scope 与以下内容相同: root，因为目前无法显式指定作用域元素。
当与 DOM API 一起使用时，例如 querySelector()、querySelectorAll()、matches() 或 Element.closest()，: scope 匹配调用该方法的元素。
示例
以下示例演示 :scope 伪类和 Element.matches() 方法的用法。
示例
以下示例演示 :scope 伪类和 Element.matches() 方法的用法。 p>
:scope 伪类用于在复杂选择器中选择当前元素。
在此例如，我们应用颜色:红色； style 为 :scope 伪类，该伪类以 div 元素为目标。
脚本中的 Element.matches() 方法用于检查元素是否与特定选择器匹配。
<html>
<head>
<title>:scope Element.matches() 例子</title>
<style>
:scope {
color: red;
font-size: 20px
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</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>