CSS-样式权重和优先级

前言：

---

权重是什么？

• 权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
• 多个样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。
• 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。
• 如果两个选择器同时作用到一个元素上，权重高者生效。
  
  

权重的介绍：

---

css的权重的顺序为：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

权重记忆口诀：从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。

一张有趣的权重关系图：

场景介绍：

---

权重值的比较：

权重值的比较不是简单的加法运算，所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高这个说法在大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：

//	样式一
body header div nav ul li div p a span em {color: red}

//	样式二
.count {color: blue}

样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。

正确计算方式：样式一权重值应该是0, 0, 0, 11，样式二的权重值是0, 0, 1, 0。

根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。样式二和样式一的A、B相同，而样式二的C大于样式一，所以，不管D的值如何，样式二权重值都大于样式一，所以显示蓝色。

特殊的 !important（提升样式优先级）：

!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

当多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。

!important 的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性，所以最好的办法就是：不要使用 !important。

样式重复多写：

在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的。

#box {
 background-color: green;
}
/* 这条生效 */
#box {
 background-color: blue;
}

内联（行内）、内部（页级）和外联样式优先级：

内联样式的权重值最大。
内部和外联样式权重一样时，后引入者生效。

注意：同样样式，权重相等的情况下，靠近目标的优先。

总结：

---

• 常用选择器权重优先级：!important > id > class > tag。
• !important可以提升样式优先级，但不建议使用。
• 两条样式都使用!important，则权重值高的优先级更高。
• 在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的。
• 样式指向同一元素，权重规则生效，权重大的被应用。
• 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用。
• 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用。