CSS选择器优先级(CSS三大特性:层叠性、继承性、优先级)
本博文介绍CSS三大特性之一:优先级。
1 规则
(1)若选择器相同,则执行层叠性(层叠性:给相同的选择器设置相同的样式,则“后来居上”,后面设置的样式会覆盖前面设置的样式);
(2)若选择器不同,则有优先级。
2 选择器权重
常见的选择器权重如下表:
选择器 | 权重 |
继承或者*(通配符) | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式(style="") | 1,0,0,0 |
!important | 无穷大 |
对选择器权重的说明如下:
(1)权重是由4组数字组成,没有进位;
(2)比较权重大小:从左边第一个数字开始比较,直到第四个数字;
(3)继承的权重是0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0;
(4)权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。权重叠加计算方法:将组成复合选择器的基础选择器的权重相加(4组数字分别相加),即得到新权重。
权重叠加示例:
选择器 | 权重 | 说明 |
div u li | 0,0,0,3 | 3个标签选择器(0,0,0,1) |
.nav ul li | 0,0,1,2 | 1个类选择器(0,0,1,0)+2个标签选择器(0,0,0,1) |
a:hover | 0,0,1,1 | 1个标签选择器(0,0,0,1)+1个伪类选择器(0,0,1,0) |
.nav a | 0,0,1,1 | 1个类选择器(0,0,1,0)+1个标签选择器(0,0,0,1) |