# 权重

**!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器**

| 选择器     | 表达式或示例                                                    | 说明                                                                        | 权重  |
| ------- | --------------------------------------------------------- | ------------------------------------------------------------------------- | --- |
| ID选择器   | #aaa                                                      |                                                                           | 100 |
| 类选择器    | .aaa                                                      |                                                                           | 10  |
| 标签选择器   | h1                                                        | 元素的tagName                                                                | 1   |
| 属性选择器   | \[title]                                                  | [详见这里](http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html) | 10  |
| 相邻选择器   | selecter + selecter                                       | 拆分为两个选择器再计算                                                               |     |
| 兄长选择器   | selecter \~ selecter                                      | 拆分为两个选择器再计算                                                               |     |
| 亲子选择器   | selecter > selecter                                       | 拆分为两个选择器再计算                                                               |     |
| 后代选择器   | selecter selecter                                         | 拆分为两个选择器再计算                                                               |     |
| 通配符选择器  | \*                                                        |                                                                           | 0   |
| 各种伪类选择器 | 如:link， :visited， :hover， :active， :target， :root， :not等  | 10                                                                        |     |
| 各种伪元素   | 如::first-letter,::first-line,::after,::before,::selection | 1                                                                         |     |

#### 计算示例

* important: 无穷大
* 内联样式: 1000
* ID: 100
* 类、伪类、属性: 10
* 元素、伪元素: 1
* 通配符: 0

权重计算时，每遇到一个选择器就加上相应的基数，总和大的认为权重更高。如下:

```
style=""                    => 1000(一个行内样式)
#title{}                    => 100(一个ID选择器)
.root                       => 10(一个类)
[title]                     => 10(一个属性)
div                         => 1(一个元素)
*{}                         => 0(通配符)
div span {}                 => 1+1=2(两个元素)
div h1+span {}              => 1+1+1=2(三个元素)
div:first-child             => 1+10=11(一个元素，一个伪类)
div [title]                 => 1+10=11(一个元素，一个属性选择器)
body #title .root p {}      => 112(1+100+10+1，两个元素，一个Id选择器，一个类)
```

#### 其他总结：

1. !important 优先级最高，但也会被权重高的important所覆盖
2. 行内样式总会覆盖外部样式表的任何样式(除了!important)
3. 单独使用一个选择器的时候，不能跨等级使css规则生效
4. 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
5. 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.
6. 权重相同时，与元素距离近的选择器生效