CSS权重

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

CSS权重：概述

• 权重决定了哪一条规则会被浏览器应用在元素上；
• 权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因；
• 权重的级别划分时包含了所有的css选择器；
• 如果两个选择器作用在同一元素上，则权重高者生效。

权重等级

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

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

行内样式包含在你的html中 对你的元素产生直接作用。<h1 style="color: #fff;">header</h1>

2、ID选择器

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

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

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

4、元素和伪元素

元素跟伪元素选择器，比如:before 与 :afte。
伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如hover，active等等，而伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
注意，伪元素选择器选择出来的“部分” 不在dom里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。 永远记得 伪元素生成的是“表现”。

怎么确定权重

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

body #content .data img:hover

最终的权重值是0122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1 。
另一种方法：计算有几个id选择器的数量为a ,计算其他属性跟class选择器的数量为b ，计算元素名跟伪元素名的数量为c ，然后结合起来就是权重。

权重的基本规则

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

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

#content h1 {
  padding: 5px;
}

#content h1 {
  padding: 10px;
}

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

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

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

CSS权重规则

1、包含更高权重选择器的一条规则拥有更高的权重；
2、Id选择器的权重比属性选择器高；
3、带有上下文关系的选择器比单纯的元素选择器权重要高；
4、与元素“挨得近”的规则生效，比如css中我们定义了以下的规则，

#content h1 {
  padding: 5px;
}

但html 中也定义了规则：

<style type="text/css">
  #content h1 {
    padding: 10px;
  }
</style>

Html中定义的规则因为跟元素挨得比较近，所以生效。
5、最后定义的这条规则会覆盖上面与之冲突的规则；

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

段落会呈现绿色的文字。当然也会出现黄色的背景，因为第一条规则只是被覆盖了color属性。
6、无论多少个元素组成的选择器，都没有一个class选择器权重高；
7、通配符选择器也有权重，权重被认为是 0，0，0，0。比如 ， body 被继承的css属性也带有权重，权重是0，0，0，0。
转载自：
英文原文：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

中文译文：http://www.w3cplus.com/css/css-specificity-things-you-should-know.html