权重等级
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。
网友评论