CSS层叠规则

猫性男孩 · 发表于 2013-3-28 11:52:24

一直要总结一下CSS的层叠规则. 一个页面总是包含很多的CSS,而一个element总会和很多的选择器(selector)相匹配.当选择器中的属性和值有冲突的时候,浏览器使用哪一个? 如下所示:
[code=Xml width=600px]<!DOCTYPE html>
<html>
<head>
<style>
.a .b .c {color:red;}
.a .b a {color:green}
#hid {color:black;}
a.c {color:yellow;}
.c.d {color:grey;}
</style>
</head>
<body>

<div class="a">
  <div class="b">
<a class="c d" id="hid" href="url">click me</a>
  </div>
</div></body>
</html>[/code]

  以上代码中的"click me"将显示什么颜色呢? 换句话说,每个颜色的优先级是如何排的? 看完这片文章,此问题迎刃而解.
  以下会用到的术语有 选择器, 伪类,伪元素,类,属性,元素,ID. 这些是基本概念,如果不懂,建议去查看相关书籍.
层叠规则如下:   1, 找出相关规则,与当前选中的元素相匹配.相关规则应该是适用于当前选中element的所有selector.
  2, 按照重要性分组,带有!important的分为一组,另一组为不带!important的. 如果遇到冲突的属性定义,带!important的将胜出.
  3, 第一步中分组以后,每组中的定义再各自PK,来决定优先级. 此步是查看CSS的来源,CSS有3个来源: 作者定义, 读者定义,浏览器定义. 浏览器定义永远最低. 作者定义在非important组中比读者定义优先级高,在important组中比读者定义要低.
  4, 接下来比特殊性.每个css的定义都有一个特殊性值.值高的优先. 后面会详细给出如何计算特殊性值
  5, 比完特殊性,如果还无法分出胜负,那就用后定义的覆盖前面定义的.
  我想,1,2,3,5是不用仔细讲了.重点讲第4步,如何计算特殊性值.
计算特殊性   一个selector的特殊性表示方法为0.0.0.0. 按照计算规则给每位填充数字. 特殊性的比较则是先比第一位,大的胜出,相等的话就比下一位.
  特殊性计算方法如下:
  1, 内联style,特殊性首位加1, 其值应为1.0.0.0
  2, selector中带几个ID,第2位就加几个1. 比如 #hid {} 的值为 0.1.0.0
  3, selector中所出现的类,伪类,以及属性的个数和构成第3位. 例如 .a.b[type="text"]:hover{} 这个选择器中有2个类,1个属性,1个伪类,所以它的第3位为4, 表示为0.0.4.0
  4, selector中出现的元素,以及伪元素的个数和构成第4位. 例如 h1:first-letter{} 中存在1个元素,一个伪元素,其特殊性为0.0.0.2
  5, 通配符对特殊性没有任何贡献.
  6, 继承得到的css也没有任何特殊性.
  结合以上法则,我们将文章开头的selector的特殊性算一遍.
  .a .b .c {color:red;}  //0.0.3.0
.a .b a {color:green} //0.0.2.1
#hid {color:black;} //0.1.0.0
a.c {color:yellow;} //0.0.1.1
.c.d {color:grey;} //0.0.2.0
  这回知道应该显示什么颜色了吧?

		自动登录	找回密码
密码			立即注册

[教程] CSS层叠规则

站长推荐 /1