有时候对同一个目标元素,选择器有多种不同的写法。具体哪种声明会生效,主要看层叠关系
层叠关系主要看三层,分别是特殊性,权重和顺序。
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 顺序排序
当权重,特殊性都一样,就是顺序排序。顺序在后面的声明层级高。
总结:层级的高低决定了应用哪个声明。
时间: 2024-12-20 05:40:58