CSS伪类:is()和:where()的区别是什么？

二者的元素匹配逻辑完全一致，都支持传入选择器列表，匹配列表中任意选择器命中的元素，仅在选择器优先级（特异性）计算规则上存在本质区别：

• :is() 的优先级等于其参数列表中优先级最高的选择器的优先级，会参与整个选择器的权重计算
• :where() 的优先级固定为 0，其参数内的所有选择器都不会给整个选择器增加任何权重

你给出的示例代码中，两段选择器匹配的元素范围完全相同，但优先级不同：

/* 选中处于hover状态、位于header、main或footer元素内的任意段落 */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 选中处于hover状态、位于header、main或footer元素内的任意段落 */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 以上二者等价于如下写法的匹配范围 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

我们可以通过实际场景验证优先级差异：

/* 权重：类选择器10 + 标签选择器1 = 11 */
.content p {
  color: blue;
}

/* :is参数内最高优先级是类选择器10 + 标签1 + 伪类10 = 总权重21，优先级高于上面的规则，hover时会显示红色 */
:is(.header, .content, .footer) p:hover {
  color: red;
}

/* :where优先级为0，总权重仅为标签1 + 伪类10 = 11，和.content p权重相同，只有写在后面时才会覆盖蓝色 */
:where(.header, .content, .footer) p:hover {
  color: red;
}

内容的提问来源于stack exchange，提问作者nCardot