为何11个类选择器优先级低于ID选择器？基于CSS权重规则的问询

先把你的代码场景贴出来，方便大家直观理解：

#box { width: 100px; height: 100px; background-color: #ff0; }
.one.two.three.four.five.six.seven.eight.nine.ten.eleven { background-color: #f00; }

<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

这背后的核心原因是CSS权重的比较规则不是简单的数值累加，而是「层级优先级」的对比逻辑：

• CSS权重的四个数位（1,0,0,0）是按从左到右的优先级层级来判定的，并不是把它们当成十进制数字相加计算总和。
• 比较时会先看最高层级的数位（比如内联样式的1,0,0,0），只要这个数位有差异，直接就能分出胜负；如果最高层级相同，再依次比较下一层级，以此类推。

回到你的例子：

• ID选择器#box的权重是 0,1,0,0
• 11个类选择器组合的权重是 0,0,11,0

对比时先看第二个层级（ID专属位）：1 vs 0，ID选择器的这个层级数值已经更大了——此时后面的类层级不管是11还是100都没用，因为前面的层级已经决出了胜负，后面的数位根本不会被纳入比较。

简单总结：ID选择器的权重层级本身就高于类选择器，不管类选择器堆多少个，都跨不过这个层级差距。

如果想要覆盖ID选择器的样式，你只能用更高层级的选择器：

• 内联样式（权重1,0,0,0）
• 带!important的声明（会跳过常规权重比较，优先级最高，但不推荐滥用）
• 包含更多ID选择器的复合选择器（比如#box.some-class，权重0,1,1,0，比单个ID的0,1,0,0高）

内容的提问来源于stack exchange，提问作者bernk