css优先级
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择符,则加1、0、0、0
若是 ID选择符,则加0、1、0、0
若是 类选择符/伪类选择符,则分别加0、0、1、0
若是 元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
选择器 | 特殊性 | 以10为基数的特殊性 |
---|---|---|
style=“color: red” | 1, 0, 0, 0 | 1000 |
#id {} | 0, 1, 0, 0 | 100 |
#id #aid | 0, 2, 0, 0 | 200 |
.sty {} | 0, 0, 1, 0 | 10 |
.sty p[title=“”] {} | 0, 0, 2, 0 | 20 |
p:hover {} | 0, 0, 1, 0 | 10 |
p {} | 0, 0, 0, 1 | 1 |
ul::after {} | 0, 0, 0, 1 | 1 |
div p {} | 0, 0, 0, 2 | 2 |