CSS选择器优先级计算器 - 层叠权重比较

A：这是CSS特异性机制的核心规则。10个类选择器组成的「.a.b.c.d.e.f.g.h.i.j」权重为(0,10,0,0)，而1个ID选择器「#id」的权重为(1,0,0,0)。比较四元组时从最高位a开始，ID选择器的a=1大于类选择器的a=0，因此无论后面有多少个类选择器，ID选择器都优先生效。这就是「高位优先」原则——四元组的比较不是总和比较，而是逐位比较，高位胜出则无需看低位。在实际开发中，应避免同时使用ID选择器和类选择器来控制同一元素的样式，以减少优先级冲突。

A：:not()伪类本身不贡献任何权重，但它参数列表中的选择器权重会被「继承」到外层。例如「div:not(.hidden)」的权重为(0,1,1,0)，其中1来自:not()内部的.hidden类选择器，1来自外层的div元素选择器。同理「:not(#special)」的权重为(1,0,0,0)。这意味着:not()内部的选择器越复杂，整体权重就越高。需要注意的是，如果:not()的参数为伪元素选择器，根据W3C规范伪元素不能作为:not()的参数。在实际开发中，理解:not()的权重传递规则对避免样式覆盖意外非常重要。

A：:is()和:where()在功能上类似，都接受选择器列表，但在权重计算上有本质区别。:is()取其参数列表中权重最高的选择器的值——例如「:is(#app, .wrapper)」的权重等同于#app的权重(1,0,0,0)。而:where()的权重始终为(0,0,0,0)，无论其参数中包含什么选择器。例如「:where(#app, .wrapper)」的权重为(0,0,0,0)。这种设计让:where()非常适合编写「默认样式」或「重置样式」——你可以确保通过:where()定义的样式永远不会覆盖其他正常定义的样式。在大型项目中合理使用:where()可以有效控制样式优先级，避免特异性战争。

A：在四元组(a,b,c,d)中，!important标记在d位。当CSS声明包含!important时，该声明的d值为1，否则为0。比较两个声明时，首先比较d值——d=1的声明优先于d=0的声明，无论a、b、c的值如何。这就是为什么「p!important」(0,0,1,1)可以覆盖「#header .nav a」(1,1,1,0)。当两个声明都带有!important时，d值相同(都是1)，则按正常规则比较a、b、c值。工具建议将!important视为最后手段，优先通过合理的「选择器架构」和CSS架构方案(如BEM、CSS Modules、Tailwind)来管理样式优先级，避免在项目中出现!important满天飞的困境。

A：属性选择器(如[type=text]、[data-role=nav])和大多数伪类(如:hover、:focus、:checked、:nth-child(n))在四元组中都计入b层级，与类选择器相同。这意味着一个属性选择器的权重等同于一个类选择器。例如「[type=text]」的权重为(0,1,0,0)，与「.input」相同。但有一个重要的例外：伪元素选择器(如::before、::after)计入c层级，与元素选择器相同。在实际开发中，了解哪些选择器计入b层级可以帮助你准确预判选择器的优先级，避免因误判权重而导致的样式覆盖问题。建议在编写选择器时有意识地规划各层级的使用数量。

A：当两个选择器的四元组(a,b,c,d)完全相同时，CSS层叠机制会进入最后一个判定维度——「源码顺序」(Source Order)。在CSS代码中后出现的规则会覆盖先出现的规则。例如如果先定义「.btn { color: blue }」后定义「.btn { color: red }」，那么按钮的颜色最终为红色。这也是为什么在使用CSS框架时，自定义样式应放在框架样式之后引入，以确保自定义样式能够覆盖框架默认样式。在工具中，当检测到两个权重相同的输入选择器时，会提示用户关注源码顺序的影响，并建议通过增加权重差异来消除不确定性。

A：通配符选择器(*)的权重为(0,0,0,0)，它不贡献任何特异性权重，等同于不存在。CSS组合器(子组合器>、相邻兄弟组合器+、通用兄弟组合器~)本身也不贡献权重，它们仅用于描述元素之间的关系。例如「#nav > .item」的权重为(1,1,0,0)，其中>不计入任何权重。但需要注意的是，群组选择器(逗号分隔)中的每个选择器是独立计算权重的，例如「#nav, .sidebar」会分别计算为(1,0,0,0)和(0,1,0,0)。了解这些选择器的权重特性可以帮助你在构建选择器时更加精确地控制特异性，避免不必要的权重增加。