4. 选择器的权重

        样式冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。

        发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。

选择器的权重（数字越大权重越大）

                内联样式            1,0,0,0          千

                id选择器              0,1,0,0         百

                类和伪类选择器   0,0,1,0        十

                元素选择器       0,0,0,1            1

                通配选择器       0,0,0,0

                继承的样式       没有优先级

            比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的，例如在 div,p,span里面，div不能和p、span相加，而是哪个（div或p或span）的权重大，由哪个决定）。

•                 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器（同                     一个选择器不能进行数量叠加）。
•                 如果优先级计算后相同，此时则优先使用靠下的样式（因为代码后执行）。

        可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

        注意：在开发中这个玩意一定要慎用！

示例1（选择器的相加计算）：

<div id="a" class="box1">我是一个div</div>

/*  id优先级是100 */
#a{
    color:red;
}


/*  类优先级是10 */
.box{
    color:yellow;
}


/*  元素+id选择器优先级是100+1=101 */
div#a{
    color:green;
}

结果： 

           

示例2（样式由选择器的权重决定）：

    <div id="box1" class="red d1 d2 d3 d4" style="background-color: chocolate;">我是一个div <span>我是div中的span</span></div>

        .d1{
            background-color: purple ;
        }
        .red{
            background-color: red;
            /* font-size: 20px; */
        }

结果，内联样式的优先级高于类选择(d1和red)

 

 

示例3：继承的样式没有优先级：

/* span是div的后代 */
<div>
    我是一个div
    <span>我是div中的span</span>
</div>

div{
    font-size:20px;
}
*{
    font-size:50px;
}

结果：可以看到字体没有应用父代div的20px，而是应用了通配符*的样式50px。