为何不匹配的CSS类会参与选择器优先级计算？

这问题真的很容易让人困惑，我刚遇到类似情况时，盯着浏览器DevTools半天没反应过来！咱们一步步拆解清楚：

1. 先看CSS嵌套的展开逻辑 #

你写的嵌套规则会被CSS预处理器（比如Tailwind用的PostCSS）展开成平级的选择器列表，比如：

.both-have, .foo.bar {
  & .my-inner { background-color: red; }
}

会被展开为：

.both-have .my-inner, .foo.bar .my-inner { background-color: red; }

这里包含两个独立选择器：.both-have .my-inner（能匹配到你的元素）和.foo.bar .my-inner（完全不匹配）。

2. DevTools的显示容易“误导”你 #

你在浏览器里看到的规则特异性（比如(0,2,1)），其实是DevTools的一种简化显示：它会展示整个选择器列表中最具体的那个选择器的特异性，而不是实际匹配到你元素的那个选择器的特异性。

比如上面的展开规则里，.foo.bar .my-inner包含3个类选择器（.foo+.bar+.my-inner），特异性是(0,3,0)；而真正匹配的.both-have .my-inner只有2个类选择器，特异性是(0,2,0)。DevTools会把整个规则的特异性显示为最高的(0,3,0)，这很容易让你误以为不匹配的选择器提升了优先级，但实际上，匹配过程只看真正命中的选择器的特异性。

3. 真正影响样式的是CSS规则的顺序 #

你在Tailwind Playground里看到红色背景生效，核心原因其实是规则的输出顺序：PostCSS在处理带.foo.bar的选择器列表时，把展开后的红色规则输出到了蓝色规则的后面。而CSS中，当两个规则的特异性相同时，后出现的规则会覆盖先出现的。

当你去掉.bar变成.both-have, .foo时，PostCSS调整了输出顺序，把红色规则放在了蓝色规则前面，所以蓝色背景生效——这完全是处理器的排序逻辑导致的，和不匹配选择器的特异性无关。

4. 再对照CSS规范看 #

你引用的W3C规范内容是对的：选择器列表的特异性是针对每个选择器单独计算的，匹配时只取匹配的选择器中最具体的那个的特异性，不匹配的选择器根本不会参与计算。你遇到的“反常”现象，本质是DevTools的显示方式+CSS处理器的输出顺序共同造成的错觉，并非规范要求的行为。

所以不用怀疑自己的直觉，不匹配的选择器确实不会影响匹配选择器的优先级——只是中间的工具行为让它看起来像而已😉

内容来源于stack exchange