CSS选择器权重
2019-12-17 本文已影响0人
轩逸无痕
CSS3用一个四位的数字串(CSS2是三位)来表示，可以理解为四个级别，值从左到右，左面的最大，一级大于一级，级别之间不会进位。
一、权重级别
| 选择器类型 | 权重值 |
|---|---|
| 继承 或者 通配符（*） | 0,0,0,0 |
| 元素（标签）选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式（ style=""） | 1,0,0,0 |
| !important | ∞ 无穷大 |
二、权重可以叠加
| 举例 | 叠加 | 权重值 |
|---|---|---|
| div ul li | 3个元素选择器 | 0,0,0,3 |
| a:hover | 1个元素选择器，1个伪类选择器 | 0,0,1,1 |
| #nav ul | 1个ID选择器，1个元素选择器 | 0,1,0,1 |
级别之间不会进位 ，比如说有10个div ，权重是0,0,0,10， 而不是 0,0,1,0， 所以不存在说10个div的权重就赶上一个类选择器。
