CSS新特性解析：@scope规则详解

新年快乐，开工大吉。今天带大家了解一个实用的CSS新特性：@scope规则。在Sass或Less这类CSS预编译工具中嵌套语法较为常见，就像这样，可以一定程度上简化CSS代码的书写，让层次结构更清晰。

@scope规则的作用与之类似，例如将刚才的Sass嵌套改为@scope规则书写，就会是这样，可以看到样式按照正确的预期渲染了，这里的背景色成功渲染了。

@scope规则不会改变CSS选择器的优先级，例如这里的@scope(nav)的优先级等同于nav，右边的案例可以证明这一点。如果@scope(nav)不参与优先级计算，遵循后来居上的原则，上面这个链接的背景色应该是浅粉色，但事实没有，说明@scope(nav)参与了优先级计算。

any-link是伪类选择器，优先级大于任意的标签选择器，因此下面的链接的背景色是浅粉色。规范还提供了名为：scope的伪类，可以选择规则自身的匹配，例如这里可以设置nav元素自身红色边框。

@scope规则还提供了排除语法，例如此例，通过to语法的设置让p元素的子元素不参与nav匹配，因此p元素下的a元素就没有背景色设置。

最后@scope规则还支持复杂选择器，就像这样的语法也是合法的。

以上就是本次分享的全部内容，如果你有任何疑问可以通过评论的方式进行反馈，我会一一解答，我们下个视频再见。