关于CSS权重,需要以套计算公式来计算。
标签选择器 | 计算权重公式 |
---|---|
继承或* | 0,0,0,0 |
每个元素(标签选择器) | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个ID | 0,1,0,1 |
每个行内样式style | 1,0,0,0 |
!important 重要的 | ∞无穷大 |
CSS的权重继承或*是最小的(没有权重),!important权重是最大的。
值从左到右,左面的值越大,权重越高,类似我们学过的个十百千万。
CSS除了有权重外,还有权重叠加,在布局中我们经常会使用交集选择器或后代选择器等(.nav .name)等,会出现多个选择器,这时候就会出现权重叠加。权重叠加是这样来计算的:
- 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
要注意的是这个数位之间是没有进制的,比如:0,0,0,5+0,0,0,5=0,0,0,10,而不是0,0,1,0,因此不会出现10个div能赶上一个类的情况。
继承的权重是0。
如果出现了权重相同的情况,则会根据层叠性的就近原则。