pseudo-class selectors :is() and :where()

[xiaotiandada]

• https://developer.mozilla.org/en-US/docs/Web/CSS/:where
• https://developer.mozilla.org/en-US/docs/Web/CSS/:is
• https://css-tricks.com/almanac/selectors/w/where/
• https://web.dev/css-is-and-where/

CSS :is() 选择器的权重与普通选择器相同，由选择器的特殊性和重复性组成。

特殊性是指选择器的特殊性值，它由四个部分组成，分别是：

行内样式的特殊性值为 1,0,0,0
ID选择器的特殊性值为 0,1,0,0
类选择器、属性选择器和伪类的特殊性值为 0,0,1,0
元素选择器和伪元素的特殊性值为 0,0,0,1
重复性指同一选择器在同一个样式表中出现的次数，每出现一次就增加一点。

因此，选择器的权重可以通过特殊性值和重复性计算得出。在样式表中，如果有多个选择器匹配了同一个元素，则会按照选择器的权重来确定应用哪个样式规则。如果权重相同，则后面的规则将覆盖前面的规则。

下面是一些选择器权重的例子：

/* 行内样式，特殊性值为 1,0,0,0 */
<div style="color: red;"></div>

/* 类选择器，特殊性值为 0,0,1,0 */
.my-class {
  color: red;
}

/* ID 选择器，特殊性值为 0,1,0,0 */
#my-id {
  color: red;
}

/* 多个选择器，权重相同，后面的规则将覆盖前面的规则 */
.my-class span, #my-id {
  color: blue;
}

/* 使用 :is() 选择器 */
:is(h1, h2, h3) {
  color: red;
}

因此，:is() 选择器的权重与其他选择器的权重相同，由其特殊性和重复性决定。

:is() 选择器的 specificity 取决于内部选择器的 specificity。例如，:is(div p) 的 specificity 等于 div 和 p 的 specificity 之和。因此，:is(div p) 的 specificity 将高于 div 或 p 单独使用时的 specificity。