css中选择器的优先级以及css权重计算
优先级的大小
!Important>行内样式>ID选择器>内选择器>标签>通配符>继承>浏览器默认属性
css权重选择器优先级计算表格
| 选择器 | 选择器权重 |
|---|---|
| 继承或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器,伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !mportant | 无穷大 |
优先级注意点:
1.权重有4组数字组成,但是不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推
3.等级判断从左向右,如果某一位数值相同,则判断下一位数值
4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器是100,行类样式表为1000,!important无穷大
5.继承权中为0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都为0.
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重
-div ul li ---->0,0,0,3
-.nav ul li---->0,0,1,2
-a:hover---->0,0,1,1
-.nav a---->0,0,1,1