css权重，即特定性（Specificity），是浏览器决定CSS属性值与元素关联性强弱的标准。此特定性基于匹配规则，这些规则由不同种类的CSS选择器组成。官方文档解释，特定性表示CSS选择器与元素的相关性，相关性越强，权重越高。那么，特定性是如何比较的呢？特定性是根据选择器中的不同选择器类型数目决定的。...
前端杂谈： CSS 权重 Specificity
css权重，即特定性（Specificity），是浏览器决定CSS属性值与元素关联性强弱的标准。此特定性基于匹配规则，这些规则由不同种类的CSS选择器组成。
官方文档解释，特定性表示CSS选择器与元素的相关性，相关性越强，权重越高。那么，特定性是如何比较的呢？特定性是根据选择器中的不同选择器类型数目决定的。根据W3标准，CSS选择器分为4种类型：a、b、c、d。比较不同CSS选择器权重时，遵循a>b>c>d的顺序。
在所有类型中，写在HTML代码style属性中的CSS属性具有最高优先级。ID选择器（b）相较于类选择器（c）具有更高优先级，符合日常经验。
除了特定性计算规则中的CSS选择器类型，还有一些如*、+、>、:not()等选择器，它们不被计入CSS权重计算。然而，::not()选择器本身不计算权重，但其内部的CSS选择器需要计算权重。
当特定性相同时，默认情况下，最后声明的CSS选择器生效。若存在重复的CSS选择器类型，权重会进行重复计算。
关于!important：按照MDN的说明，!important不在CSS选择器权重计算范围内，但浏览器在遇见!important时会进行特殊判断，多个!important进行比较时才会计算权重。通常不建议使用!important。
在实际编码过程中，可能很少遇到包含10多个类的情况。然而，了解权重真正的计算和比较规则，才能正确处理。
想了解更多前端和数据可视化内容？欢迎访问我的D3.js和数据可视化GitHub地址，欢迎star和fork。D3-blog。
如果觉得本文不错，不妨点击链接关注：、、。
如需直接联系，请通过邮箱:ssthouse@163.com。2024-08-26
