【CSS】我的颜色到底听谁的？—— css的层叠性

我们之前学了很多个选择器，都可以帮我们定位到具体标签上，然后我们在设置样式。但这也不可避免会产生一个问题：如果多个选择器同时指向同一个标签，那么到底该听谁的？？？

css一定有自己的机制来处理这个问题，这个就是css的层叠性。今天我们就一起来具体讨论一下这个问题。

1.场景一：多个选择器选中同一个标签，怎么办？

首先我们写一段简单的html代码：

7层叠性.html（body部分）

     <div id="box1" class="box1">
         <div id="box2" class="box2">
             <div id="box3" class="box3">
                 <p>我到底什么颜色的？</p>
             </div>
         </div>
     </div>

注意给组件设置id和class时同名并不影响，因为一个是id，一个是类，本来就是不同的东西。

好，首先我们先在head标签里写如下一段css代码：

7层叠性.html（head部分）

     <style>
         #box1 .box2 .box3 p{
             color: red;
         }
         #box1 div.box2 div.box3 p {
             color: green;
         }
         .box1 #box2 div p {
             color: blue;
         }
     </style>

我们注意写下的这三个选择器有一个共同的特点，就是虽然写法不同，但最后都指向了p标签。那么这个时候浏览器显示出来的到底是什么颜色呢？

css有规定：当几个选择器同时指向同一个标签时，此时比较权重。权重就是特定选择器的个数（id选择器 > 类选择器 > 标签选择器）

我们可以分析一下上面三个选择器的权重：　

            id选择器个数    class选择器个数     标签选择器个数

                1              　　　　 2           　　        1

                1            　　　　   2              　　     3

                1          　　　　     0              　　     2

经过对比，应该是第二个选择器起作用，也就是颜色应该显示为绿色。我们在浏览器里查看一下实现效果：

再打开谷歌的"检查"工具，看一下源代码

另外两个选择器都被消掉，只留下绿色选择器还在。

总结：当几个选择器同时指向同一个标签时，此时比较权重，谁大听谁的！

2.场景二：权值相同，怎么办？

7层叠性.html（head部分）

     <style>
         .box1 #box2 .box3 p {
             color: red;
         }
         #box1 .box2 .box3 p {
             color: green;
         }
         .box1 .box2 #box3 p {
             color: blue;
         }
     </style>

更改css部分，我们发现这三个选择器同样指向了同一个标签，所以处理办法依旧是比较权重，好，开始分析

                                id选择器个数    class选择器个数     标签选择器个数

                                    1               2                   1

                                    1               2                   1

                                    1               2                   1

结果我们发现虽然指向同一个标签，但是他们权重相同，这个时候我又该听谁的呢？？

css规定：当几个选择器同时指向同一个标签时，如果权重相同，那么依照书写顺序，谁写在后面听谁的。

因此我们推断应该是蓝色。看一下实现效果：

把上面两个例子进行一个总结：当几个选择器同时指向同一个标签时，首先比较权重，谁大听谁的，如果权重相同，那么依照书写顺序，谁写在后面听谁的。

3.场景三：样式都是继承来的，怎么办？

保持html代码不变，我们再次更改css代码

7层叠性.html（head部分）

     <style>
         #box1 {
             color: red;
         }
         .box1 #box2 .box3 {
             color: pink;
         }
         .box1 .box2 {
             color: green;
         }

     </style>

其中这三个选择器都没有直接指到p标签，但是都选择了p标签的祖辈标签，从上一篇随笔中我们知道css具有继承性，P标签会继承父类的样式。那么问题来了，每个父辈样式不同，p该继承谁呢？其实这个问题很好想象，你是向你爸爸多一些，还是你爷爷多一些？还是你祖爷爷多一些？

css规定：当三种选择器都没有直接选择元素，通过继承让p拥有属性， 此时看谁描述的近，就听谁的。

所以一次判断，应该是父标签的颜色，也就是粉色。我们看一下实现效果检查一下：

4.场景四：描述一样近，怎么办？

Q：那么如果描述的一样近呢？我们又该听谁的？

保持html代码不变，更改css代码

7层叠性.html（head部分）

     <style>
         #box1 .box2 #box3 {
             color: red;
         }
         .box1 .box2 .box3 {
             color: green;
         }
         .box1 #box2 #box3 {
             color: blue;
         }
     </style>

此时三个选择器都选择到p标签的父标签，描述的一样近，根据经验，这时候我们又该比较什么？？对，跟之前例子类似，此时又要比较权重。现在比较的方法又和之前例子是类似了。

css规定：当三种选择器都没有直接选择元素，通过继承让p拥有属性， 此时看谁描述的近，就听谁的。假如描述的一样近,此时再比较权重， 权重谁高就听谁的。若权重相同，谁在后面听谁的。

实现效果：

自己比划一下，是不是能够想明白为什么是蓝色？？？？如果可以，说明对这一块是彻底理解了。

5.总结

以上就是关于css层叠性的知识，最后总结一下：

　　1.当几个选择器同时指向同一个标签时，首先比较权重，谁大听谁的，如果权重相同，那么依照书写顺序，谁写在后面听谁的。

　　2.当几个选择器都没有直接选择元素，通过继承拥有属性， 此时看谁描述的近，谁近就听谁的。假如描述的一样近,此时再比较权重，谁大听谁的。若权重相同，谁在后面听谁的。