手册
目录
收藏306
分享
阅读3072
更新时间2025-07-16
CSS @scope 规则允许您选择特定 DOM 子树中的元素。
通过此 @ 规则，您可以精确地定位元素，而无需编写过于具体的选择器。
此 @ 规则还减少了选择器与 DOM 结构之间的耦合。
在这里，我们使用两个独立的 @scope 块来匹配 .ex1 类和 .ex2 类中的 <a> 元素。:scope 用于选择和设置作用域根本身的样式。在此示例中，作用域根是应用了类的 <div> 元素：
@scope (.ex1) {
:scope {
background-color: salmon;
padding: 10px;
}
a {
color: maroon;
}
a:hover {
color: blue;
}
}
@scope (.ex2) {
:scope {
background-color: beige;
padding: 10px;
}
a {
color: green;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
查看以下 HTML：
<div class="container">
<div class="news">
<h2>Some header</h2>
<img src="example.jpg" alt="Some image">
</div>
</div>
这里有一些嵌套的 <div> 元素，如果我们想为上述 container/news 部分中的 <h2> 和 <img> 元素设置样式，则必须编写以下内容（不使用 @scope）：
.container .news h2 {
color: green;
}
.container .news img {
border: 2px solid maroon;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用 @scope 规则，您可以精确地定位元素，而无需编写过于复杂的选择器，如下所示：
在这里，我们仅针对 .container 组件中的 <h2> 和 <img> 元素，将 .container 设置为 @scope 规则的根作用域：
@scope (.container) {
h2 {
font-size: 30px;
color: green;
}
img {
border: 5px solid maroon;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@scope 规则包含一个或多个规则集，可以通过两种方式使用：
“甜甜圈作用域”仅针对位于祖先树中两个元素之间的元素。这是例子：
@scope (.container) to (.news) {
h2 {
font-size: 30px;
color: green;
}
img {
border: 5px solid maroon;
}
}
运行实例 »点击 "运行实例" 按钮查看在线实例
@scope (作用域根) {
规则集
}
或者
/* 甜甜圈作用域 */
@scope (作用域根) to (作用域限制) {
规则集
}
表格中的数字表示首个完全支持该 @ 规则的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 118 | 118 | 不支持 | 17.4 | 104 |
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77.3万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.2万人学习
共25课时
61.8万人学习
共22课时
23.1万人学习
共28课时
34万人学习
共89课时
125.6万人学习
