尝试了解 CSS 中的特异性计算

Question

我正在阅读 MDN 文档这里。他们正在解释 CSS 的特殊性。对于

button:not(#mainBtn, .cta)

，特异性为 1-0-1。由于这里涉及一个类，所以我认为特异性应该是1-1-1。根据他们的解释，

:not()

本身不会增加特异性，但它的参数或嵌套规则会增加特异性。那么，有人可以解释一下，为什么这里的特异性是 1-0-1 而不是 1-1-1 ？

谢谢

Answer 1

逗号用于分隔规则并组合它们，无需写两次。

button:not(#mainBtn, .cta)

相当于：

button:not(#mainBtn){...

button:not(.cta){...

它适用于 id 或 class，此时的目标元素不需要同时具有 class 和 id。因此，特异性为 1-0-1。