手册
目录
收藏671
分享
阅读2653
更新时间2025-07-16
CSS @scope 规则允许您选择特定 DOM 子树中的元素。
通过此 @ 规则，您可以精确地定位元素，而无需编写过于具体的选择器。
此 @ 规则还减少了选择器与 DOM 结构之间的耦合。
在这里，我们使用两个独立的 点击 "运行实例" 按钮查看在线实例 查看以下 HTML： 这里有一些嵌套的 点击 "运行实例" 按钮查看在线实例 使用 在这里，我们仅针对 .container 组件中的 点击 "运行实例" 按钮查看在线实例@scope 块来匹配 .ex1 类和 .ex2 类中的 元素。:scope 用于选择和设置作用域根本身的样式。在此示例中，作用域根是应用了类的
@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;
}
}
运行实例 »
Some header
和
元素设置样式，则必须编写以下内容（不使用 @scope）：
例子 2
.container .news h2 {
color: green;
}
.container .news img {
border: 2px solid maroon;
}
运行实例 »@scope 规则，您可以精确地定位元素，而无需编写过于复杂的选择器，如下所示：例子 3
和
元素，将 .container 设置为 @scope 规则的根作用域：
@scope (.container) {
h2 {
font-size: 30px;
color: green;
}
img {
border: 5px solid maroon;
}
}
运行实例 »@scope 规则包含一个或多个规则集，可以通过两种方式使用：
