CSS之选择器权重

在css语言中有多个选择，而不同选择器的权重也各有不同

<div>我是什么颜色</div>
<div class="green">我是什么颜色</div>

.green{
    color:green;
}
div{
    color:blue;
}

那么上面两个块级元素都是什么颜色呢？

正确答案是：上蓝下绿

我们都知道代码渲染的时候是一行一行的而不同的样式正常的情况下下面的样式要给上面的样式覆盖掉，但是由于我们选择器的权重问题，我们的元素选择器就不会把类选择器覆盖掉！

所以！！！！！

内联样式 > id选择器 > 类选择器 > 标签选择器（元素选择器）> 通用选择器

选择器权重的计算

内联样式：1000 （1000）

id选择器：100 （0100）

类选择器：10 （0010）

标签选择器（元素选择器）：1 （0001）

通用选择器：0

<div>
    <div>
        <p>
            选择器权重的计算
        </p>
     </div>
</div>

div div p{
    color:green;  //因为元素选择器的权值为1 所以此处的权值就为003
}
p{
    color:red;    //只有一个元素选择器所以为001
}

虽然单独的<p>在后代选择器的下方，但是由于权重问题，显而易见003>001所以颜色为绿色。

我们在计算的时候呢是永远都不会进位的！！！ 记住以下三点

1. 权重值越大，优先级越高
2. 选择器选择的范围越小越精确，优先级越高
3. 继承来的属性权重非常低接近于0！！

！imporant 权值最高！

<div style="color: red;">我是什么颜色</div>

div{
    color:blue !important; 
}

已知内联样式权值最高 但这个颜色还是变成了蓝色 因为我们在元素选择器的后方添加了一个 !important

我们通常在对一个比较完善的项目进行更改样式的时候来使用这种方法