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标签的方式，都可取的，但是当这三种都同时存在的时候，我们的浏览器