CSS :where()伪类的用法

:where() 伪类是和 :is() 伪类一同出现的，它们的含义、语法、作用一样，唯一的区别是优先级不一样：:where() 伪类的优先级永远是 0，完全忽略其中参数选择器的优先级。例如：

:where(.article, section) p {}

的优先级等同于 p 选择器，参数中的选择器的优先级被完全忽略。

又如：

:where(#article, #section) .content {}

的优先级等同于 .content 选择器。

我们可以巧妙地借助这一特性来降低某些全局 CSS 的优先级。举个例子：

ol:not(article ol),
ul:not(article ul) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

这个实现有个小问题，就是优先级有点高，虽然 :not() 伪类本身的优先级为 0，但是其中的参数 article ol 和 article ul 是有优先级的，这就导致一旦 <article> 元素中有其他 <ol> 元素想要设置 margin 或者 padding 样式，就可能无法覆盖 CSS reset 设置的样式。

此时可以借助 :where() 伪类去除参数中选择器的优先级，也就是这样书写：

ol:where(:not(article ol)),
ul:where(:not(article ul)) {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

此时，选择器的优先级就和 ol、ul 这个标签选择器的优先级一样了，可以轻松被业务 CSS 覆盖，不会影响正常的开发。

相比使用 @layer 规则降低 CSS 的优先级，使用 :where() 伪类的方法更敏捷且兼容性更好，因为所有现代浏览器支持 :where() 伪类的时间是 2021 年 1 月，而支持 @layer 规则是在 2022 年 3 月。