Css选择器权重排序详解+权重计算

前言：

很多人面试的时候，面试官会问一些基础的问题。比如选择器权重排序，大家都知道，id权重>class权重>标签权重。但是深入讲个所以然，很多人又回答不上来。今天就写个案例来给大家讲解一些选择器当中的权重是如何计算的。

权重计算：

大家看下面这段代码，分析一下，p标签会是什么颜色？

<style>.div1 .div2 .div3 p{color: red;}.div1 #div2 #div3 p{color: green;}.div1 div.div2 .div3 p{color:orange;}
</style>

    <div class="div1" id="div1"><div class="div2" id="div2"><div class="div3" id="div3"><p>我是复杂权重</p></div></div></div>

正确答案应该是：绿色

为什么呢？带着这个疑惑我们来解答这个问题。毋庸置疑的的是上面的三种选择p标签的方式，都可取的，但是当这三种都同时存在的时候，我们的浏览器会如何识别呢？这其中就包含了一个复杂权重的计算问题。

权重计算方式：id数量，class数量，标签数量

第一条css样式它的id数量是0，class数量是3，标签数量是1，那么它的权重就是0,3,1

第二条css样式它的id数量是2，class数量是1，标签数量是1，那么它的权重就是2,1,1

第三条css样式它的id数量是0，class数量是3，标签数量是2，那么它的权重就是0,3,2

首先先从id数量比起，谁多谁就胜出。如果id数量比不出来，那么就从class数量比起，然后再到标签数量。

由此可以看出，第二条样式id数量最多，它的权重要比其它两条大，所以css会识别这条，并为它设置绿色。

加强权重：

我们再来看一段案例，猜测一下li.span标签的颜色是什么？

    <div class="div4" id="div4"><ul class="ul1" id="ul1"><li>1</li><li class="spec">1</li><li>1</li><li>1</li><li>1</li></ul></div>

    /* 权重：1,1,1 */#div4 .ul1 li{list-style: none;color: red;}/* 权重：0,1,1 */li.spec{color: orange !important}

正确答案是：橙黄色

那有的同学就有疑问了，明明是第一条属性的权重大呀，不应该是红色吗？但是大家看第二条样式，颜色后面跟了一个!importtant，这是什么意思呢？

!importtant的意思就是加强权重，在英文翻译中叫做“重要的”。在哪条属性上面设置加强权重，那么它的优先级会增加。加了这个属性，它的权重就是最大的，所以颜色优先选择了橘黄色。

看到这里，相信大家对权重计算以及加强权重有了更深入的了解了。

声明：以上所有内容为本人原创，未经许可严禁转载，转载请私信，并注明出处。