css权威指南阅读笔记-第三章声明的层级
2015-07-01 20:39
453 查看
有时候对同一个目标元素,选择器有多种不同的写法。具体哪种声明会生效,主要看层叠关系
层叠关系主要看三层,分别是特殊性,权重和顺序。
1.特殊性
2. 权重
3 顺序排序
当权重,特殊性都一样,就是顺序排序。顺序在后面的声明层级高。
总结:层级的高低决定了应用哪个声明。
层叠关系主要看三层,分别是特殊性,权重和顺序。
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 顺序排序
当权重,特殊性都一样,就是顺序排序。顺序在后面的声明层级高。
总结:层级的高低决定了应用哪个声明。
相关文章推荐
- 多屏复杂动画CSS技巧三则(转载)
- 使用JS配合CSS实现Windows Phone中的磁贴效果
- Selenium - CSS Selector
- CSS3之Transform(变形)一
- 什么是CSS网页切图
- CSS选择器
- js的封装库css
- CSS3小分队——进击的border-radius
- css嵌入任意字体
- CSS3动画(性能篇)
- CSS3下实现边框阴影效果(下)-翘边阴影效果
- CSS3下实现边框阴影效果(上)之曲线阴影
- CSS3 animation 逐帧动画
- css学习小结
- HTML 与 CSS 中值得注意的要点(持续更新)
- 嵌套表格 边框合并的css如何设置
- 关于CSS预处理器(less,sass)
- css3之Transition(转换)
- css垂直居中的方法
- 最简洁的CSS清除浮动的方法