CSS优先级权重计算法

之前写CSS时,对CSS的权重总是无法理解。到底会使用哪一个CSS定义基本上搞不明白,在网上查了一堆资料,总算对CSS优先集权重的计算有一点理解。

个人认为CSS优先级可以分为五个判断级别,从高到低分别为:是否有!important声明,标签内Style定义,ID选择符定义,Class选择符定义,元素选择符定义。用程序语言来说的话,可以把这个五个判断级别定义成一个有五个值的数组,如(0, 0, 0, 0, 0)。

其计算规则如下:

  • 样式定义里有!important声明,第一级别(是否有!important声明)加1。
  • 标签中Style属性定义的样式,第二级别(标签内Style定义)加1。
  • 每个ID选择符(如 #id),第三级别(ID选择符定义)加1。
  • 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover),第四级别(Class选择符定义)加1。
  • 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,第五级别(元素选择符定义)加1。

优先权的比较方法如下:

  • 从第一级别依次向第五级别比较,如果相同级别权重不同,则值大的权重高;如果相同级别权重相同,则比较下一级别。如:
    (1, 0, 0, 0, 0) > (0, 1000, 0, 0, 0) 注意:权重之间是不会进位的。
    (0, 1, 2, 0, 0) > (0, 1, 1, 0, 0)
  • 如果权重相同,则选择最后出现的样式。
  • 继承得到的样式的权重最低,可以看成是(0, 0, 0, 0, 0)。

例)如下代码:

HTML
<style type="text/css">
div#div_id {color:red;}
div.divClass {color:blue;}

.first {color:yellow !important;}
div .items {color:green;}
li.items {color:black;}
</style>
<div id="div_id" class="divClass">
	Div Value
    <ul id="ul_id" class="ulClass">
        <li id="item1" class="items first" style="color:gray;">Item Value 1</li>
        <li id="item2" class="items" style="color:gray !important;">Item Value 2</li>
		<li id="item3" class="items last" >Item Value 3</li>
    </ul>
</div>

对于Div Value的颜色CSS的计算如下,满足该div的css有两个:

  1. div#div_id {color:red;}
    它有一个元素选择符(div)和一个ID选择符(#div_id),优先权重是(0, 0, 1, 0, 1)
  2. div.divClass {color:blue;}
    它有一个元素选择符(div)和一个Class选择符(.divClass),优先权重是(0, 0, 0, 1, 1)

前者比后者优先权重大,所以Div Value的颜色应该是红色。

对于Item Value 1的颜色CSS的计算如下,满足该li的css有五个:

  1. div#div_id {color:red;}
    它是通过DIV继承过来的样式,优先权重是(0, 0, 0, 0, 0)。
  2. .first {color:yellow !important;}
    它有一个Class选择符(.first)以及有!important声明,优先权重是(1, 0, 0, 1, 0)
  3. div .items {color:green;}
    它有一个元素选择符(div)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)
  4. li.items {color:black;}
    它有一个元素选择符(li)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)
  5. style="color:gray;"
    标签内Style定义,优先权重是(0, 1, 0, 0, 0)

.first {color:yellow !important;}的权重最大,所以Item Value 1的颜色应该是黄色。

对于Item Value 2的颜色CSS的计算如下,满足该li的css有四个:

  1. div#div_id {color:red;}
    它是通过DIV继承过来的样式,优先权重是(0, 0, 0, 0, 0)。

  2. div .items {color:green;}
    它有一个元素选择符(div)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)

  3. li.items {color:black;}
    它有一个元素选择符(li)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)

  4. style="color:gray !important;"
    它是标签内Style定义,并有有!important声明,优先权重是(1, 1, 0, 0, 0)

style="color:gray !important;"的权重最大,所以Item Value 2的颜色应该是灰色。

对于Item Value 3的颜色CSS的计算如下,满足该li的css有三个:

  1. div#div_id {color:red;}
    它是通过DIV继承过来的样式,优先权重是(0, 0, 0, 0, 0)。

  2. div .items {color:green;}

它有一个元素选择符(div)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)

  1. li.items {color:black;}
    它有一个元素选择符(li)和一个Class选择符(.items),优先权重是(0, 0, 0, 1, 1)

第2个和第3个权重相同,li.items {color:black;}后出现,所以Item Value 3的颜色应该是黑色。


参考地址:http://blog.csdn.net/goplay122/article/details/6084441

转载请注明:宇托的狗窝 » CSS优先级权重计算法

发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址