# 权重

**!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. 权重相同时，与元素距离近的选择器生效


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mm.ricky.moe/css/css-basis/quan-zhong.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.