首页 > 代码库 > CSS权重

CSS权重

2024-11-23 10:28:40   202人阅读

CSS的权重指的是选择符的优先级，优先级高的CSS选择符所设置的样式会覆盖优先级低的选择符所设置的样式。权重越高优先级越高，计算权重有一定的规则。

计算CSS权重首先需要了解CSS的6中选择器。

1.ID选择器
    例如：
    #read_title{}
2.类选择器
    例如：
    .read_title{}
3.属性选择器
    例如：
    a[href=http://www.mamicode.com/‘http://www.baidu.com‘]{}
4.伪类和伪对象选择器
　　例如：
　　:hover {}
　　::after {}
5.标签类型选择器
　　例如：
　　a {}
6.通配选择器
　　例如：
　　* {}

 


所有在CSS样式中定义的选择符都是由这6中选择器所构成。
基础选择器的优先级：
ID>类 | 伪类 | 属性选择器 >标签类型 | 伪对象 > 通配符


 



CSS权重计算规则：




（1）忽略全局选择器
（2）计算选择符中ID选择器的数量（=a）
（3）计算选择符中类选择器、属性选择器、伪类选择器的数量（=b）
（4）计算标签类型选择器以及伪对象选择器的数量（=c）






计算出a、b、c的值之后，按顺序连接a、b、c三个数字组成一个新的数值，这个数值越大，代表优先级越高。



权重计算举例：


 




*           　　　　　　/*a=0,b=0,c=0 -> 权重 = 0*/
li          　　　　　　/*a=0,b=0,c=1 -> 权重 = 1*/
ul li       　　　　　　/*a=0,b=0,c=2 -> 权重 = 2*/
ul ol+li    　　　　　　/*a=0,b=0,c=3 -> 权重 = 3*/
h1 + *[REL=up]        /*a=0,b=1,c=1 -> 权重 = 11*/
ul ol li .red         /*a=0,b=1,c=3 -> 权重 = 13*/
li .red .level        /*a=0,b=2,c=1 -> 权重 = 21*/
#x34y                 /*a=1,b=0,c=0 -> 权重 = 100*/
#s12:not(FOO)         /*a=1,b=0,c=1 -> 权重 = 101*/




 


如果选择符的权重相同，则采用就近原则来判断，最后定义的样式会被采用。


如果要优化性能，则在定义CSS样式时需要使CSS权重相对较高，尽量不要使用层叠的选择器，多使用ID选择器。


如果要提高CSS文件的重用性，则在定义CSS样式时需要使CSS权重相对较低，多使用类、属性、通配选择器。


 


 
CSS权重






























        

            
                
                  
                
                

                    联系

                    我们