CSS样式优先级

CSS样式优先级

层叠性和继承性导致优先级问题

CSS样式有时会有冲突的情况，此时就要通过一定的规则来判断哪一条样式生效。

样式加载优先级

加载生效：行内样式 > 内部样式 > 外部样式 > 导入样式。

原则：距离远近原则

继承性规则

1. 最近的祖先样式优先级比其他祖先样式高。
2. 直接样式比祖先样式优先级高。

祖先样式就是继承下来而自身没有的样式，直接样式就是一个标签本身拥有的属性。

div{
    font-size:40px;
}
p{
    color:red;
}
<div><p>123<p><div>
针对123的字号属性，属于祖先样式，颜色属性属于直接样式。

选择器优先级的计算

通过选择器权值进行计算自身属性优先级。

权值表：
标签选择器                 权值：1
伪元素选择器或伪对象选择器    权值：1
类选择器                   权值：10
属性选择器                  权值：10
id选择器                   权值：100
其他选择器（如通配选择器）     权值：0

例子：

div p{
    font-size:40px;
}
//权值=1+1
div{
    font-size:20px;
    background-color:red;   
}
//权值=1
#box1{
    background-color:yellow;
}
//权值=100
.box1{
    background-color:blue;
}
//权值=10

出现冲突时会根据权值来决定是哪个选择器的样式生效。

如果权值相同，则后定义的样式会覆盖前定义的样式。

p{
    font-size:40px;
    font-size:20px;
}
//此时字体则为20px；

特殊情况

!improtant具有最高优先级，但是不推荐使用！

div{
    background-color:red !important;
}
#box1{
    background-color:yellow;
}
//此时类选择器的权值为100，大于标签选择器，但是因为标签选择器中样式有!important属性。则应用div选择器中的样式。
//!important具有最高优先级

**注意：**继承性规则比选择器优先规则优先级高。

例子：

通过计算，选择器优先级相同，本来字体应该应用div的40px样式。但是由于继承性规则2，直接样式比祖先样式优先级高。p本身自带font-size属性，所以就不用div（祖先）的样式。

如有错误或者建议，欢迎大佬指正！