Css权重优先级计算规则

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

• 最近在重新学习一些基础的知识点；此文仅在于为自己的知识作一个记录总结

CSS选择器优先级

• 浏览器是通过判断CSS优先级，来决定到底哪些属性值是与元素最为相关的，从而作用到该元素上。
• CSS选择器的合理组成规则决定了优先级，我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态，下面我们来具体了解下CSS选择器优先级及权重。

CSS选择器如何计算？

1. 当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS。
2. CSS优先级是根据由每种选择器类型构成的级联字串计算而成的，它不是一个对应相应匹配表达式的权重值。
3. 相同CSS表达式，在DOM结构中的距离是不会对元素优先级计算产生影响的。

CSS优先级顺序

• 下列是一份优先级逐级增加的选择器列表：

1. 通用选择器
2. 元素（类型）选择器
3. 类选择器
4. 属性选择器
5. 伪类
6. ID 选择器
7. 内联样式

• ID选择器的特殊性值，加0,1,0,0。
• 类选择器、属性选择器或伪类，加0,0,1,0。

• 元素和伪元素，加0,0,0,1。

• 通配选择器*对特殊性没有贡献，即0,0,0,0。

• 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、 :visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求， 一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？ 根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同， 那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类， 要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时， 同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active）， 必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？ 可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。 有意思的是，如果某个元素class（类选择器）的数量大于255个，不同的浏览器的表现不一致， 包括但不限于以下浏览器认为class选择器的优先级会超过id选择器：

Firefox 52.0.2 (64 位)
IE 11

参考链接

1. css优先级详解
2. css优先级计划规则

---

分割线

---

相关信息

以上就是我关于 Css权重优先级计算规则 知识点的整理与总结的全部内容，希望对你有帮助。。。。。。。