css的某些特殊属性

时间:2022-03-31 18:53:49

当我们为同一个元素设置了两个css属性时,这个元素会使用哪一个属性呢?

<p class="style">css特殊性</p>
p{
color:red;
}
.style{
color:blue;
}

p和.style都匹配到这个元素上,这个元素会选择哪个呢?浏览器会选择.style。这是根据一个叫做权值的特性来决定的。哪种权值高就使用哪种样式。
权值规则
*标签权值:1
类选择器:10
ID:100*
由此可知:

p{
color:red;
}
权值为1
.style{
color:blue;
}
权值为10

如p span .warning{}的权值为1+1+10=12

问题:当html文件中对于同一个元素可以有多个CSS样式存在,并且这多个CSS样式具有相同的权重值该怎么办?
层叠。在html文件中对于同一个元素可以有多个css样式存在,当有相同权值存在的样式时,会根据css样式的前后顺序来决定。所以出于最后的css样式会被启用。

有时在做网页代码时,有些特殊情况需要为某些样式设置具有最高权值。
!important可以实现

P{
color:red!important;
}

最后,一般情况下css样式优先级的排列如下:
内嵌式 > 嵌入式 > 外部css