码迷,mamicode.com
首页 > Web开发 > 详细

css优先级

时间:2014-12-22 19:19:48      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

CSS优先级包含四个级别

  1. 标签内定义样式
  2. ID选择符
  3. Class选择符
  4. 元素选择符

CSS优先级的计算规则

类型计算规则
元素标签中定义的样式(Style属性) 加1,0,0,0
每个ID选择符(如 #id) 加0,1,0,0
每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover) 加0,0,1,0
每个元素选择符(如p)或伪元素选择符(如 :firstchild)等 加0,0,0,1
其它选择符包括全局选择符*,
不过这也是一种specificity。
加0,0,0,0,相当于没加
  1. 然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值
  2. 从左到右逐位比较大小,数字大的CSS样式的优先级就高。

注意

  1. !important声明的样式优先级最高,如果冲突再进行计算。
  2. 如果优先级相同,则选择最后出现的样式。
  3. 继承得到的样式的优先级最低。

示例

选择器计算结果
* { } 0
li { } 1  (one element)
li:first-line { } 2  (one element, one pseudo-element)
ul li { } 2  (two elements)
ul ol+li { } 3  (three elements)
h1 + *[rel=up] { } 1,1  (one attribute, one element)
ul ol li.red { } 1,3  (one class, three elements)
li.red.level { } 2,1  (two classes, one element)
style=”” 1,0,0,0  (one inline styling)
p { } 1  (one HTML selector)
div p { } 2  (two HTML selectors)
.sith 1,0  (one class selector)
div p.sith { } 1,2  (two HTML selectors and a class selector)
#sith 1,0,0  (one id selector)
body #darkside .sith p { } 1,1,2  (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

IE6 链接优先级Bug

正常计算结果:

a:hover = div .yellowLink = a.yellowLink
a:visited = div .yellowLink = a.yellowLink

IE6计算结果:

a:hover > div .yellowLink
a:hover > a.yellowLink
a:visited > div .yellowLink
a:visited > a.yellowLink
  • 在IE6里面,a:hover的优先级比div.greenLink a高。并且,同样的结论在:visited和:active里面也有。
  • 在IE6里面,“.orange_link .orange_link a”的优先级和“a:hover”一样高
  • IE6里,“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高
  • IE6中,“a#blue_link”或是“#blue_link”的优先级比a:hover要高
  • 以上的结论在:visited和:active也成立,但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。

解决办法:不给a定义伪类颜色(这种解决方案在“用户可用性”上并不好);或使用#id重置过来。
以上结论记不住也就算了,知道IE6中存在这个Bug就可以了。

css优先级

标签:

原文地址:http://www.cnblogs.com/zhusheng2008/p/3920918.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!