为什么 CSS 分组似乎会影响此示例中的选择器特异性？

Question

根据我对CSS特异性和级联的理解，如果一个元素被相同特异性的选择器定位两次，那么应该应用后一种样式。然而，在下面的示例中，情况似乎并非如此，其中父选择器首先与另一个更高特异性的选择器分组。

https://codepen.io/rjwtrmn/pen/rNbbaoQ

<div class="a">
  I should be blue
  <div class="d">I should be green, but I am pink</div>
</div>

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


.a {
  color: blue;
  .d {
    color: green;
  }
}

从此处的文档和类似问题的答案中，我希望 CSS 组中的每个选择器在特异性计算方面都是独立的。我是否误解了规范或者这是一个已知的错误？

Answer 1

您的选择器如下所示：

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

:is(.a) .d {
  color: green;
}

<div class="a">
  <div class="d">I should be green, but I am pink</div>
</div>

第一个

:is()

比第二个

具有更高的特异性

:is()

伪类的特异性被其最具体参数的特异性所取代。因此，使用 :is() 编写的选择器不一定具有与不使用

:is()

编写的等效选择器相同的特异性，例如， ^ref

如果您想知道我为什么使用

:is()

嵌套选择器有意使用与:is()伪类相同的特异性规则，它只使用其参数中最大的特异性，而不是跟踪哪个选择器实际匹配。

这是必需的出于性能原因；如果一个选择器有多个可能的特殊性，这取决于它的匹配精确程度，它会使选择器匹配变得更加复杂和缓慢。 ^参考