css优先级权重计算

2023-11-06

技术

N 人看过

css 优先级权重计算

权重值

W3C 早已固定,级别最低的为 0，选择器权重: !important(10000)>行内(1000)>id(100)>类(10)>标签(1)>通配符(0)

以上的权重数值，是 W3C 方便 developer 记忆权重大小关系，给定的一个虚拟值，不是固定的。这里 1000，实际就是四位，也可以按照 1,0,0,0 来理解。

四位权重值的理解

第一等级代表：内联样式，style=””，权值为 1000
第二等级代表：ID 选择器，如#id 名，权值为 100
第三等级代表：class 类、伪类选择器和属性选择器，如.class 类名，:hover，a[target=”_blank”]，权值都为 10
第四等级代表：标签选择器、伪元素选择器，如 div，::after，权值都为 1

计算权重大小练习

div ul li {....}------> 0,0,0,3，分析：1+1+1=3

.nav ul li {....} ------> 0,0,1,2，分析：10+1+1=12

a:hover {....} -------> 0,0,1,1，分析：1+10=11，标签选择器a，伪类选择器:hover权重为10，与class类选择器相同

.nav a {....} ------> 0,0,1,1，分析：10+1=11

注意：数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0,1,0，所以不会存在 10 个 div 能赶上一个类选择器的情况（对应最后一个特殊案例 5，在特殊案例 5 中进行演示讲解）

案例

下面的代码运行后，颜色显示为 red 还是 green？

<style>
        /* 1+1+1+1+1+1+1+1+1+1+1+1=12 */
        div>div>div>div>div>div>div>div>div>div>div>p{
            color: red;
        }
        /* 10 */
        .p1{
            color:green
        }
    </style>
/* 显示绿色，为什么*/
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <p class="p1">我是div里面的p</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

错误理解

根据前面的分析，权重分别为 1+1+1+1+1+1+1+1+1+1+1+1=12，10，权重比较 12>10，都是颜色样式，故显示为 red 颜色。

正确理解

1 在下面的代码，运行后发现显示 green 绿色，为什么，这里涉及到多层嵌套时，权重的比较方法
总结

无论嵌套多少层同级别的标签（div>div>div>div>div>div>div>div>div>div>div>p{……….}），都没有一个类的权重值大；
无论嵌套多少层相同级别的类，都没有一个 id 的权重值大。
id(100)>类(10)>标签(1)，以上这个值都是虚拟值;

正确理解 2

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。0,0,0,12 与 0,0,1,0 的比较，所以最终显示为 green 绿色。

总结

再举个例子：数位之间没有进制，比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0,1,0，所以不会存在 10 个 div 能赶上一个类选择器的情况。

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可。