为何CSS选择器分组似乎会影响选择器特异性？

你遇到的现象并非规范误解或bug，而是原生CSS嵌套与你预期的预处理器嵌套逻辑不同导致的：

1. 原生CSS嵌套的编译逻辑 #

当你在原生CSS的分组选择器内写嵌套后代选择器时，浏览器会将其编译为:is()选择器的形式，而非拆分多个独立选择器：

你的原CSS代码：

.a,
.b .c {
  color: red;
  .d {
    color: pink;
  }
}

在原生CSS中会被解析为：

.a, .b .c {
  color: red;
}
:is(.a, .b .c) .d {
  color: pink;
}

2. 特异性计算规则 #

根据CSS规范，:is()选择器的特异性取其参数中特异性最高的选择器：

• .a的特异性是 (0,1,0)（1个类选择器）
• .b .c的特异性是 (0,2,0)（2个类选择器）
  因此:is(.a, .b .c)的特异性为 (0,2,0)，加上后面的.d（0,1,0），整个:is(.a, .b .c) .d的特异性是 (0,3,0)。

而你后面的.a .d选择器的特异性是 (0,2,0)（.a + .d两个类选择器）。

由于(0,3,0) > (0,2,0)，所以粉色样式的优先级更高，会覆盖绿色样式。

3. 如何得到你预期的结果 #

如果你希望分组选择器中的每个项独立与嵌套选择器组合（即生成.a .d和.b .c .d两个独立选择器），有两种方式：

• 使用Sass、PostCSS等预处理器，它们的嵌套逻辑会将分组拆分为独立选择器；
• 在原生CSS中手动拆分分组，避免嵌套在分组内：

  .a {
    color: red;
  }
  .a .d {
    color: pink;
  }
  .b .c {
    color: red;
  }
  .b .c .d {
    color: pink;
  }
  
  .a {
    color: blue;
  }
  .a .d {
    color: green;
  }
  

此时.a .d的两个规则特异性相同，后声明的绿色样式会生效。

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