CSS样式的优先级
对于相同CSS起源来说,不同位置的样式其优先级也是不同的。一般来说,行内样式会优先于内嵌样式表,内部样式表会优先于外部样式表。而被附加了!important关键字的声明会拥有最高的优先级。
在实际开发中,如果作者设计网页字体颜色为14号黑色字体,而用户在浏览器里利用火狐浏览器的插件firebug修改页面字体为18号字体,那么浏览器该如何处理呢?
根据CSS层叠规则:作者设计的样式能够覆盖浏览器默认设置的样式,而用户在浏览器设置的样式可以覆盖作者的样式。同时,CSS根据样式的远近关系来决定层叠样式的优先级:在同等条件下,距离运用对象的距离越近就有较大的优先权,因而行内样式大于内部样式和外部样式。
如果多个不同类型的选择器同时为一个对象设置样式,该对象将如何显示最终样式呢?以下给出一个简单的计算方法。对于常规选择器,它们都拥有一个优先级加权值
- 标签选择器:优先级加权值为1
- 伪元素或伪对象选择器:优先级加权值为1
- 类选择器:优先级加权值为10
- 属性选择器:优先级加权值为10
- ID选择器:优先级加权值为100
- 其他选择器:优先级加权值为0,如通配选择器等
然后,以下面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是: - 统计选择器中ID选择器的个数,然后乘以100
- 统计选择器中类选择器的个数,然后乘以10
- 统计选择器中的标签选择器的个数,然后乘以1
以此方法类推,最后把所哟有加权值数相加,即可得到当前选择器的总加权值,最后根据加权值来决定哪个样式的优先级大
对于由多个选择器组合而成的复合选择器,首先分别计算每个组成选择器的加权值,接着相加得出当前选择器的总分,最后根据选择器的分值大小,分值越高则优先级越高,那么就将应用它所设置的样式,如果分值相同,则根据位置关系来判断,越靠越近对象的样式就拥有越高的优先级。
h3{color: #ff7300;} /*加权值=1分 */
.f14{font-size: 14px;} /*加权值=10分 */
#head{width: 960px;} /*加权值=100分 */
h3 .f14{font-weight: bold;} /*加权值=1分+10分=11分 */
#head h2{border: 1px solid #ff73;} /*加权值=100分+1分=101分 */
div p{padding: 0 10px;} /*加权值=1分+1分=2分 */
div #head{margin: 0 auto;} /*加权值=1分+100分=101分 */
#head h2 span{float: right;} /*加权值=100分+1分+1分=102分 */
#head .f14 em{float: right;} /*加权值=100分+10分+1分=111分 */
#head .f14 span em{float: right;} /*加权值=100分+10分+1分+1分=112分 */
#head div h2 .f12 span em{color: #000;} /*加权值=100分+1分+1分+10分+1分+1分=114分 */
原文地址:https://david.blog.csdn.net
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。