关于css层叠_html/css_WEB-ITnose
程序员文章站
2022-06-14 08:22:11
...
“确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。”??《css权威指南》
特殊性
内联样式 | 1,0,0,0 |
ID | 0,1,0,0 |
类、属性选择、伪类 | 0,0,1,0 |
标签、伪元素 | 0,0,0,1 |
结合符、通配符 | 0,0,0,0 |
1 html>body table tr[id="totals"] td ul >li {color:maroon;}/*0,0,1,7*/2 li#answer {color:navy;} /*0,1,0,1 (winner)*/
注:!important 是重要声明,永远比非重要声明优先。
继承
大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承。
继承的值没有特殊性,连0特殊性(通配符)都没有。
用户代理的超链接a有默认样式不会继承,如需修改要额外写一个a:link{color:inherit;}覆盖原有蓝色。
demo
1
1This is central line.
注:这个demo也说明了不加区别地使用通配选择器会引发的继承问题。
权重和来源
5级声明权重由大到小顺序依次为:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
如果两个规则的权重、来源和特殊性完全相同,那么后写的胜出。文档中包含的规则权重高于导入的规则(@import)。
由此,推荐链接样式排序为LVHA(:link,:visited,:hover,:active)。当为同一个属性设置样式(如color),以AHLV的顺序编写就不会有悬停和响应的效果,因为链接会先找到:link而直接忽视AH。当然,如果使用组合伪类(:visited:hover)就不用担心这个问题。
层叠规则
来源>特殊性>声明顺序(主样式表>导入样式表)>继承
参考资料
《css权威指南》第3章 结构与层叠
上一篇: 六种PHP图片上传重命名提案研究与总结
下一篇: php下载文件的代码示例_PHP教程
推荐阅读
-
关于老式浏览器兼容HTML5和CSS3的问题
-
关于HTML、CSS、JavaScript三者关系的简述
-
详解关于html,css,js三者的加载顺序问题
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
Codeforces Round #156 (Div. 2)-A. Greg's Workout_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
background-size 设置背景图片的大小_html/css_WEB-ITnose
-
multiple backgrounds 多重背景_html/css_WEB-ITnose
-
建站新人_html/css_WEB-ITnose
-
折线图怎么做啊?急求!_html/css_WEB-ITnose