CSS前瞻：用@scope 定义你的CSS作用域

type

status

date

slug

summary

`@scope`定义和作用

@scope 是一个CSS的块级规则，它允许你创建一个作用域，这个作用域定义了一组样式规则应用的特定区域。说到这里是不是让你想到了Less和SCSS的作用域？没错，它们的“作用域”是一个概念。

作用域由两部分组成：作用域根和作用域限制。

示例1：使用作用域根

假设你有一个博客文章页面，它包含一个文章区块和一个评论区块。你想让这两个区块中的链接有不同的颜色。

在这个例子中，.article-section 内的所有链接将会是蓝色，而 .comments-section 内的链接将会是绿色。

示例2：使用作用域限制

现在，假设在你的文章区块中，你有一个特别的引用部分，你不希望在这个部分应用上述的蓝色链接样式。

在这个例子中，.article-section 内的链接仍然是蓝色，但文章里 .quote 类中的链接不会受这个作用域限制。（Codepen👇如果链接都显示蓝色，请到Codepen里查看）

现在来看一些高级用法。

我们可以用 :scope 和 & 指代作用域根元素，例如

分别测试 :scope 和 &，会发现效果一样，因为此时它们都等价于 .container

嵌套规则：@scope 规则可以嵌套。嵌套规则允许开发者创建复杂的样式结构，同时避免样式的冲突和污染。

在这个例子中，.outer-scope 内的段落是红色的，但在 .inner-scope 内的段落是蓝色的。

@scope 还可以与HTML的数据属性（如 data-scope）结合使用，以创建更具体的作用域。例如，你可以通过给不同部分的HTML元素添加不同的数据属性，然后在CSS中使用这些属性来定义作用域：

在这个例子中，data-scope='main-section' 的段落将会是红色，而 data-scope='sidebar' 的段落将会是蓝色。

@scope 规则的引入是CSS发展中的一次重要进步，虽然现在浏览器支持度还不够高，但对于这样重要的特性，显然不会让开发者等太久，相信很快主流浏览器都会支持的。

专栏介绍：分享CSS新特性和好看的样式设计