css选择器优先级

星期三 2013/02/20 15:15 阅读：11784 评论：0 作者：ivan 分类：CSS、Web前端

前言

除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。

Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~

我们将会讨论关于css权重的主要问题，包括例子，规则，原理，通用解决方案以及一些资源。

CSS权重：概述

权重决定了哪一条规则会被浏览器应用在元素上。
权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。
权重的级别划分时包含了所有的css选择器
如果两个选择器作用在同一元素上，则权重高者生效。
权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。
你可以通过CSS权重之争进一步了解CSS权重。
你也可以通过CSS Specificity for Poker Players进一步了解CSS权重。
如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)
如果两个选择器权重值不同，则权重大的规则被计算到权重中
如果一条规则包含了更高权重的选择器，那么这个规则权重更高
最后定义的规则会覆盖所有跟前面冲突的规则
内联样式表含有比别的规则更高的权重
Id选择器的权重比属性选择器更高
你可以使用id来增大权重
类选择器比任意数量的元素选择器都高
通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算
你可以用css权重计算器来计算权重。

什么是CSS权重？

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。参考阅读【Understanding specificity】
当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。参考阅读【Selector Specificity】
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。参考阅读【Understanding specificity】
如果两个选择器同时作用到一个元素上，权重高者生效。

权重等级

每个选择器在权重级别中都有自己泾渭分明的位置。根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

1、行内样式，指的是html文档中定义的style

行内样式包含在你的html中对你的元素产生直接作用，比如:

1	<h1 style="color: #fff;">header</h1>

2、ID选择器

Id也是元素的一种标识，比如#div

3、类，属性选择器和伪类选择器

这一类包括各种class，属性选择器，伪类选择器比如 :hover,:focus等等。

4、元素和伪元素

元素跟伪元素选择器，比如:before 与 :after.
这里我要补充的：伪元素选择器只包含以下几种:

::after
::before
::first-letter
::first-line
::selecton

详细请参阅【Pseudo-elements】

伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如hover，active等等，而伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

注意，伪元素选择器选择出来的“部分” 不在dom里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。永远记得伪元素生成的是“表现”。

扩展阅读：

如果您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，个人建议你先阅读以下几篇文章，这样更有助于帮助你阅读本文后面的内容：

如果你还分不清楚这些是怎么分类的，你可以看一下文章末尾的一个简短的分类。

怎么确定权重

权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.比如

1	body #content .data img:hover

最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1 。详细参阅【CSS Specificity】

另一种方法：计算有几个id选择器的数量为a ,计算其他属性跟class选择器的数量为b ，计算元素名跟伪元素名的数量为c ，然后结合起来就是权重。详细参阅【CSS Selector Specificity]】

为了帮助我更好的理解权重的概念，我制作了一张西斯人物能量表（大家可以自动类比为各种赛亚人，奥特曼战斗力对照表）每个角色（选择器）都拥有西斯能量（权重值，就跟赛亚人的战斗力一样），这个决定了这个人在黑暗势力里有多牛逼，也决定了css规则在你的样式表里有多牛逼。详细参阅【CSS Specificity Wars – Cheat Sheet】oocss

权重计算测试

利用第一个规则可以很容易计算权重，你可以自己试试看看掌握了没

01. *{} ====》0

02. li{} ====》1(一个元素)

03. li:first-line{} ====》2(一个元素，一个伪元素)

04. ul li {} ====》2（两个元素）

05. ul ol+li{} ====》3（三个元素）

06. h1+ *[rel=up] {} ====》11（一个属性选择器，一个元素）

07. ul ol li.red{} ====》13（一个类，一个元素）

08. li.red.level{} ====》21（两个类，一个元素）

09. style="" ====》1000(一个行内样式)

10. p {} ====》1（一个元素）

11. div p {} ====》2（两个元素）

12. .sith {} ====》10（一个类）

13. div p.sith{} ====》12（一个类，两个元素）

14. #sith{} ====》100（一个ID选择器）

15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

权重的基本规则

1、相同的权重：以后面出现的选择器为最后规则：

假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式：

#content h1 {

padding: 5px;

}

#content h1 {

padding: 10px;

}

两个选择器的权重都是0，1，0，1，最后那个规则生效。

2、不同的权重，权重值高则生效

选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。详细参阅【Understanding Specificity】

CSS权重规则

1、包含更高权重选择器的一条规则拥有更高的权重。详细参阅【Understanding Specificity】

2、Id选择器的权重比属性选择器高,比如下面的例子里样式表中#p123的权重明显比[id=p123]的权重要高。

a#a-02 { background-image : url(n.gif); }

and

a[id="a-02"] { background-image : url(n.png); }

因此A规则比B规则的权重要高。详细参阅【W3C CSS 2.1 Specification】

3、带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器。详细参阅【Cascade Inheritance】

4、与元素“挨得近”的规则生效，比如css中我们定义了以下的规则，

#content h1 {

padding: 5px;

}

但html 中也定义了规则：

#content h1 {

padding: 10px;

}

</style>

Html中定义的规则因为跟元素挨得比较近，所以生效。详细参阅【Understanding Specificity】

5、最后定义的这条规则会覆盖上面与之冲突的规则。比如下面的例子：

1 2	p { color: red; background: yellow } p { color: green }

段落会呈现绿色的文字。当然也会出现黄色的背景，因为第一条规则只是被覆盖了color属性。详细参阅【BrainJar.com】

6、无论多少个元素组成的选择器，都没有一个class选择器权重高。比如说“.introduction”高于“html body div div h2 p”。详细参阅【CSS Specificity for Poker Players】

7、通配符选择器也有权重，权重被认为是 0，0，0，0。比如 *， body * 被继承的css属性也带有权重，权重是0，0，0，0。详细参阅【CSS Specificity Clarified】

权重的例子

考虑三个代码片段：

A: h1

B: #content h1

<h1 style="color: #fff">Headline</h1>

</div>

A的权重是0,0,0,1 (一个元素),B的权重是0，1，0，1（一个id选择器，一个元素），c的权重是1，0，0，0 ，这是一个行内样式。

因为0001 = 1 < 0101 = 101 < 1000,第三个规则权重最高，因此第三个规则将会生效。若去掉第三个规则，第二个规则将会生效。

权重实战

1、利用LVHA原理来给链接应用样式：如果你想展现不同状态的链接样式，一定要记住link-visited-hover-active的顺序，或者简写为LVHA。详细参阅【Link Specificity】

2、永远都不要使用“!important”：“如果你遇到了权重问题，第一个解决方法肯定是去掉“!important”，“!important”会覆盖所有的样式规则，但“!important”根本没有结构与上下文可言，所以很少用到。详细参阅【Understanding Specificity、Selector Specificity】

3、利用id增加选择器权重：利用ul#blogroll a.highlight代替a.highlight ，权重由0, 0, 1, 1 变成了0, 1, 1, 2。

4、减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。详细阅读【Understanding Specificity】