Selector權重
权重决定了哪一条规则会被浏览器应用在元素上。
每条选择器的规则都有其权重，权重大的会覆盖掉权重小的，很多CSS出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。
依照权重的级别根据选择器被划分为四个分类：
1) 行内樣式 (style)
<h1 style="color: #fff;">header</h1>
2) id
指#ID。Id选择器的权重比属性选择器更高， 你可以使用id来增大权重；
3) 類與属性
这一类包括各种class，属性选择器，伪类选择器。
伪类选择器比如 :hover,:focus等
类选择器比任意数量的元素选择器都高
4) 元素 (element)
这一类包括元素跟伪元素选择器， 伪元素选择器比如:before 与 :after
伪元素选择器只包含以下几种:
| 偽元素選擇器 | 說明 |
|---|---|
| ::after | element 之後 |
| ::before | element 之前 |
| ::first-letter | -- |
| ::first-line | 作用于你前面元素选择器确定的一个元素的第一行 |
| ::selecton | -- |
補充
伪元素跟伪类都是选择器的补充，區別為：
- 伪类：
- 表示的是一种状态比如hover，active等等，
- 伪元素：
- 表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
- 选择出来的部分 不在dom里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。永远记得 伪元素生成的是“表现”。
- 參考: (1) w3c规范中的伪元素、(2) 如何给伪元素绑定事件
Selector權重(優先程度)
整理權重規則如下
主要的规则:
id选择器 > 类，属性选择器和伪类选择器 > 元素和伪元素
样式所在位置的影響：
内联样式（标签内style形式） > style标签 > link标签。
!improtant：
凡是属性值后加上了!important，那么它的值不会被其他值替换。
权重的基本规则
相同的权重：以后面出现的选择器为最后规则：
假如在外部样式表中，同一个CSS规则你写了两次，那么出现在前面的选择器权重低，你的样式会选择后面的样式：
#content h1 { padding: 5px; } #content h1 { padding: 10px; }两个选择器的权重都是0，1，0，1，最后那个规则生效。
不同的权重，权重值高则生效 选择器可能会包含一个或者多个与权重相关的计算点，若经过计算得到的权重值越大，则认为这个选择器的权重高。详细参阅【Understanding Specificity】
權重的計算
权重计算测试
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选择器，一个类，两个元素)
- 扑克牌权重计算法
如果你之前没有编程经验，css让你看得比较晕，这个比喻可以帮你把一些概念弄得更清楚。
把css规则作为你手中的牌，最好的一套牌决定了你最终的样式。
- Understanding Specificity Tutorial
在这个教程中，你会关注权重。
css权重关系到你的css规则是怎样显示的。你样式表中的每条ｃｓｓ规则都带有一个权重，这个权重级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。
- Cascade Inheritance: Specificity
这里会对权重问题进行一番讨论。
这些规则不仅仅存在于一张样式表中，也有可能是多张样式表。首先要明白，一个元素可以被多个规则定义样式。
- CSS 2.1 Selectors Explained
对css2.1选择器的一个全面的阐述。
通过详尽的了解css2.1的选择器，可以很大程度上优化你的html，比如减少不必要的class属性，增加大量的div或者span标签等。
- CSS Specificity Bugs in IE
Ie中权重bug的一个简短概述
- CSS Structure and Rules
基本的css语法，伪类及伪元素，还有层叠规则。
- Specificity
他看上去不怎么重要，你也可能一直用不上，但是在大的项目中，你的CSS文件变得越来越大，那么这个时候你的CSS就有可能会产生冲突。