css 权重

1. 权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。

2. 如果两个选择器作用在同一元素上，则权重高者生效。

3.如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)  

4. 最后定义的规则会覆盖所有跟前面冲突的规则

5. 内联样式表含有比别的规则更高的权重

6. Id选择器的权重比属性选择器更高

7. 你可以使用id来增大权重

8. 类选择器比任意数量的元素选择器都高

9. 通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算

权重的基本规则

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#a-02 {background-image: url(n.gif);}

B:

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 中也定义了规则：

<style type="text/css">

#content h1 {

padding: 10px;

}

</style>

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

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

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】

权重实战

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】

http://www.w3cplus.com/css/css-specificity-things-you-should-know.html