【CSS】优先级和权重

优先级

首先说一下比较简单的大致划分，一般来说优先级我们有如下判断：

1. !important。在属性后面使用该关键字可覆盖任何其他样式
2. 内联样式
3. id选择器，如#id
4. 类选择器、属性选择器（[attribute]）、伪类选择器（a:hover）
5. 标签选择器、伪元素选择器（::before）
6. 通配选择器（*）
7. 继承

以上高优先级的可以覆盖低优先级。

但是有一些比较复杂的情况下，就要用权值来算权重来确定优先级了。

权重

权值划分：

第一等级：代表内联样式，style=""，权值为1000

第二等级：代表ID选择器，如#id，权值为100

第三等级：代表类，伪类和属性选择器，如.content，权值为10

第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为0。

但是，权重的判断并不是简单的加减法来算。

当两个权值比较时，是从高到低比较位置上的权值，不是简单地计算比较1000*第一级个数+100*第二级个数+...。也就是先比较第一等级的权值，如果比较不出来再比较第二等级……这样判断权重的。

低等级的选择器用得再多也不会超过高等级选择器的优先级。

综上，这个比较规则就是：

1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；

2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；

3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）。

 

参考：

https://www.cnblogs.com/cnblogs-jcy/p/8574177.html

https://www.cnblogs.com/starof/p/4387525.html（里面的例子很不错）