关于css层叠

浏览数：39 / 时间：2015年06月09日

　　“确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。”——《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 <style type="text/css">
2     *{color:gray;}
3     #page{color:blue;}
4 </style>

1 <h1 id="page">This is <em>central line.</em></h1>

技术分享

注：这个demo也说明了不加区别地使用通配选择器会引发的继承问题。

权重和来源

5级声明权重由大到小顺序依次为：

读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理声明

　　如果两个规则的权重、来源和特殊性完全相同，那么后写的胜出。文档中包含的规则权重高于导入的规则（@import）。

　由此，推荐链接样式排序为LVHA（:link,:visited,:hover,:active）。当为同一个属性设置样式（如color），以AHLV的顺序编写就不会有悬停和响应的效果，因为链接会先找到:link而直接忽视AH。当然，如果使用组合伪类（:visited:hover）就不用担心这个问题。

层叠规则

　　来源>特殊性>声明顺序（主样式表>导入样式表）>继承

参考资料

《css权威指南》第3章结构与层叠　

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

关于css层叠