优先级注意的问题
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类元素选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style=“” | 1,0,0,0 |
!important | 无穷大 |
注意点
- 权重是有四位数字组成,但不会有进位
- 可以理解为类选择器永远大于元素选择器,id永远大于类
- 等级判断从左到右,如果有一位相同,判断下一位
- 继承的权重为0,如果该元素没有直接选中,不管父元素权重有多高,子元素得到的权重都是0
- 如果这个标签被直接选中,则不管父元素
复合选择器会有权重叠加的问题
<style>
ul li {//0,0,0,1+0,0,0,1=0,0,0,2
color:green;
}
li {
color:red;
}
.nav li {//0,0,1,0+0,0,0,1=,0,0,1,1
color:yellow;
}
</style>
<body>
<ul class="nav">
<li></li>//黄色
</ul>
</body>