权重等级
4 个等级的定义如下:
第一等:代表内联样式,如: style="",权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如 .content,权值为10。
第四等:代表元素和伪元素选择器,如 h2、:before 与 :after,权值为1。
权重值
从 0 开始,一个行内样式 +1000,一个 ID +100,一个属性选择器/class/伪类 +10,一个元素名/伪元素 +1。
| 等级 | 例子 | 权重值 |
|---|---|---|
| 行内样式 | style | 1000 |
| ID | #nav | 100 |
| 属性选择器/class/伪类 | :hover | 10 |
| 元素名/伪元素 | ::after | 1 |
权重的基本规则
- 相同的权重:以后面出现的选择器为最后规则
- 不同的权重,权重值高则生效
CSS 权重规则
- 包含更高权重选择器的一条规则拥有更高的权重。
- ID 选择器的权重比属性选择器高。
- 带有上下文关系的选择器比单纯的元素选择器权重要高。
- 与元素
挨得近的规则生效,html 中规则的比 CSS 文件的优先。 - 最后定义的这条规则会覆盖上面与之冲突的规则。
- 无论多少个元素组成的选择器,都没有一个class选择器权重高。
- 通配符选择器也有权重,权重被认为是 0。
永远都不要使用 !important。