CSS权重的进制问题

这是复习篇的第一个知识点,(CSS权重进制在IE6为256,后来扩大到了65536。而现代浏览器则采用更大的数量)在说这个知识点之前我们先来看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     div div div div div div div div div div div div p{
        color: blue;
        }
     .aa{
        color: red
     }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <p class="aa">颜色</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
       
</body>
</html>

这个大家猜一下是什么颜色,可能有的老铁会觉得蓝色啊,后代选择符的权重不是各个选择符的和吗,class选择符权重为0010,而类型选择符权重为0001,12层加起来肯定比0010大,

但是实际上,字体为红色,这里有一个很关键的问题,就是权重的进制是并不是十进制,按照现代浏览器来说,你要写嵌套几万层div字体才会变成蓝色,这非常臃肿了,嵌套几万层,实际工作中也没有哪个铁头娃会这木做吧?要是有,那他可真是个魔鬼。

原文地址:https://www.cnblogs.com/suihang/p/11171204.html