关于CSS选择器button:not(#mainBtn, .cta)特异性计算的正确性确认
2026-7-1
MDN Web Docs中给出的CSS选择器button:not(#mainBtn, .cta)特异性计算如下：
| 选择器 | 标识符 | 类 | 元素 | 总特异性 |
|---|---|---|---|---|
| button:not(#mainBtn, .cta) | 1 | 0 | 1 | 1-0-1 |
查看高亮部分的错误：
我预期的正确计算结果应为：
| 选择器 | 标识符 | 类 | 元素 | 总特异性 |
|---|---|---|---|---|
| button:not(#mainBtn, .cta) | 1(来自#mainBtn) | 1(来自.cta) | 1(来自button) | 1-1-1 |
你的判断是正确的。
根据CSS特异性规则，:not()伪类本身不产生特异性权重，但它括号内的所有选择器都会被计入整个选择器的特异性计算。具体来说，button:not(#mainBtn, .cta)的特异性需要累加三部分：
button是元素选择器，贡献1个元素计数#mainBtn是ID选择器，贡献1个标识符计数.cta是类选择器，贡献1个类计数
最终总特异性为1-1-1，MDN文档中的计算遗漏了.cta的类选择器权重，属于错误内容。
内容的提问来源于stack exchange，提问作者rocketdeveloper
相关产品推荐
相关产品推荐
