首页 > web前端 > html教程 > 关于css层叠_html/css_WEB-ITnose

关于css层叠_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:50:38
原创
898 人浏览过

  “确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。”??《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级声明权重由大到小顺序依次为:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明

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

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

 

层叠规则

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

 

参考资料

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

 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板