SCSS中:where(:root)是什么意思？

首先，:where()是CSS的伪类函数，它最核心的特点是优先级为0——不管它里面包裹的选择器本身优先级多高，整个:where(...)组合的优先级都会被拉到最低。

拿你给出的示例:where(:root)来说：

• 直接写:root时，它是伪类选择器，优先级为1；
• 写成:where(:root)后，这个选择器的优先级就变成了0，比任何普通的标签选择器（优先级1）、类选择器（优先级10）都低。

举个实际的对比例子：

/* 直接用:root，优先级1 */
:root {
  color: red;
}
/* 类选择器优先级10，能覆盖上面的红色 */
.content {
  color: blue;
}

换成:where(:root)的情况：

/* 优先级0 */
:where(:root) {
  color: red;
}
/* 标签选择器优先级1，就能直接覆盖红色 */
p {
  color: blue;
}

除此之外，:where()还常用于批量组合选择器时统一降低优先级，方便后续样式修改。比如：

/* 整个选择器的优先级只算类.title的10，header/footer这些的优先级被忽略 */
:where(header, footer, aside) .title {
  font-size: 1.2rem;
}
/* 后面只要用同样优先级的类选择器就能覆盖 */
.small-title {
  font-size: 1rem;
}

简单来说，:where()的作用就是给选择器“降权”，让样式更容易被后续的普通选择器覆盖，避免因为高优先级选择器导致的样式难以修改的问题。

内容的提问来源于stack exchange，提问作者s.k.paul