CSS权重
2021-06-06 16:04
标签：优先级 性能 定义 提高 pre not logs baidu 全局 CSS的权重指的是选择符的优先级，优先级高的CSS选择符所设置的样式会覆盖优先级低的选择符所设置的样式。权重越高优先级越高，计算权重有一定的规则。 计算CSS权重首先需要了解CSS的6中选择器。 计算出a、b、c的值之后，按顺序连接a、b、c三个数字组成一个新的数值，这个数值越大，代表优先级越高。 如果选择符的权重相同，则采用就近原则来判断，最后定义的样式会被采用。 如果要优化性能，则在定义CSS样式时需要使CSS权重相对较高，尽量不要使用层叠的选择器，多使用ID选择器。 如果要提高CSS文件的重用性，则在定义CSS样式时需要使CSS权重相对较低，多使用类、属性、通配选择器。 CSS权重 标签：优先级 性能 定义 提高 pre not logs baidu 全局 原文地址：http://www.cnblogs.com/DM428/p/7326733.html1.ID选择器
例如：
#read_title{}
2.类选择器
例如：
.read_title{}
3.属性选择器
例如：
a[href=‘http://www.baidu.com‘]{}
4.伪类和伪对象选择器
例如：
:hover {}
::after {}
5.标签类型选择器
例如：
a {}
6.通配选择器
例如：
* {}
所有在CSS样式中定义的选择符都是由这6中选择器所构成。
基础选择器的优先级：ID>类 | 伪类 | 属性选择器 >标签类型 | 伪对象 > 通配符
CSS权重计算规则：（1）忽略全局选择器
（2）计算选择符中ID选择器的数量（=a）
（3）计算选择符中类选择器、属性选择器、伪类选择器的数量（=b）
（4）计算标签类型选择器以及伪对象选择器的数量（=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*/