这个 CSS 选择器的总体特异性是什么？按钮：不是（#mainBtn，.cta）

Question

在 MDN Web Docs 网站上，他们提到选择器按钮的总特异性：not(#mainBtn, .cta) 如下：

|选择器|标识符|课程 |元素|总特异性

|按钮:not(#mainBtn, .cta) | 1 | 0 | 1 | 1-0-1

这是 MDN 网站的 URL： （https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

）

我期待这个：

|选择器|标识符|课程 |元素|总特异性

|按钮:not(#mainBtn, .cta) | 1（对于#mainBtn）| 1（对于 .cta）| 1（按钮）| 1-1-1

有人可以告诉我我的说法是否正确吗？

Answer 1

您链接到的 MDN 页面以特别清晰的方式涵盖了这一点，但在我看来，并非如此。它说：

否定 (:not())、关系选择器 (:has())、匹配任意 (:is()) 伪类和 CSS 嵌套本身不会增加特异性，但它们的参数或嵌套规则做。 每个对特异性算法贡献的特异性权重是参数或嵌套规则中权重最大的选择器的特异性权重。

选择器规范更准确地描述了它：

:is()、:not() 或 :has() 伪类的特异性被其选择器列表参数中最具体的复杂选择器的特异性取代。

因此，对于

:not(#mainBtn, .cta)

，我们采用列表中两个选择器中较大的一个 #mainBtn = 1, 0, 0 .cta = 0, 1, 0

因此，其中较大者为 1, 0, 0，然后我们添加

button

特异性 = 0. 0, 1

结果是 1, 0, 1。