CSS选择器权重疑问：12个元素选择器优先级为何低于类选择器

现象原因 #

你对CSS选择器权重的计算逻辑理解有误，CSS权重采用分层级按位对比的规则，低层级的选择器无论累加多少个，权重都无法超过更高层级的选择器，不存在跨层级累加求和超过高位权重的情况。

官方权重层级说明（优先级从高到低） #

权重由四个独立的位段组成，对比时从最高位开始匹配，只要高位数值更大，直接判定权重更高，无需对比低位：

• 第1位：行内样式，权重记为 1,0,0,0
• 第2位：ID选择器，权重记为 0,1,0,0
• 第3位：类选择器、属性选择器、伪类选择器，权重记为 0,0,1,0
• 第4位：元素选择器、伪元素选择器，权重记为 0,0,0,1

你的场景权重对比 #

你给出的两个选择器权重分别为：

1. 12个div组成的后代选择器：全部属于最低的第四级元素选择器，权重为 0,0,0,12
2. .test12 类选择器：属于第三级选择器，权重为 0,0,1,0

对比到第三位时，类选择器的1远大于元素选择器的0，因此类选择器权重更高，蓝色样式最终生效。

示例代码 #

HTML结构

<body>
    <div class="test">
        Hello World
        <div class="test">
            Hello World
            <div class="test">
                Hello World
                <div class="test">
                    Hello World
                    <div class="test">
                        Hello World
                        <div class="test">
                            Hello World
                            <div class="test">
                                Hello World
                                <div class="test">
                                    Hello World
                                    <div class="test">
                                        Hello World
                                        <div class="test">
                                            Hello World
                                            <div class="test">
                                                Hello World
                                                <div class="test12">
                                                    Hello World
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS样式

div  div  div  div  div  div  div  div  div  div  div  div{
    color: red ;
}
.test12{
    color: blue;
}

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