CSS样式优先级
层叠性和继承性导致优先级问题
CSS样式有时会有冲突的情况,此时就要通过一定的规则来判断哪一条样式生效。
样式加载优先级
加载生效:行内样式 > 内部样式 > 外部样式 > 导入样式。
原则:距离远近原则
继承性规则
- 最近的祖先样式优先级比其他祖先样式高。
- 直接样式比祖先样式优先级高。
祖先样式就是继承下来而自身没有的样式,直接样式就是一个标签本身拥有的属性。
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(祖先)的样式。
如有错误或者建议,欢迎大佬指正!