css权威指南阅读笔记-第三章声明的层级

有时候对同一个目标元素,选择器有多种不同的写法。具体哪种声明会生效,主要看层叠关系

层叠关系主要看三层,分别是特殊性,权重和顺序。

1.特殊性

选择器有各自的特殊性。
内联样式为1000,id选择器为100,class选择器和属性选择器为10,各个元素为1,通配选择器为0(0比没有大,继承的特殊性就是没有,所以有继承和通配同时出现,采用通配选择器)。如
h1.box这个选择器的特殊性就是1+10=11。
当声明中有!important的时候,那么它的特殊性超过了内联样式。
继承的属性没有特殊性,即小于通配选择器0.颜色,宽度(没有浮动的情况下)可以被继承,其他的如高度,margin,border,padding无法被继承。

2. 权重

权重主要是指重要声明,也就是加了!important的声明。它特殊性高过任何没加!important的声明。
权重由大到小依次是
1. reader important
2 creater important
3 creater normal
4 reader normal
5 user agent

3 顺序排序

当权重,特殊性都一样,就是顺序排序。顺序在后面的声明层级高。

总结:层级的高低决定了应用哪个声明。

原文地址:https://www.cnblogs.com/wz0107/p/4614492.html