前端漫谈：CSS权重（Specificity）CSS权重想必大家都听过，而且大多数人都知道一些简单的规则：较长的CSS选择器的权重会大于较短的CSS选择器的权重，而一个ID选择器将高于类选择器。但具体规范是什么？浏览器使用什么标准来确定不同选择器的权重？看看官方文档是怎么说的吧~第一个关键字：SpecificitySpecificity是浏览器决定哪些CSS属性值与元素最相关的手段，因此会被应用。Specificity是基于不同种类的CSS选择器组成的匹配规则官方文档使用Specificity：Specificity来表示css选择器与其元素之间的相关性，相关性越强，权重越高。那么问题来了，Specificity怎么比较呢？Specificity是应用于给定CSS声明的权重，由匹配选择器中每种选择器类型的数量决定。Specificity由选择器中不同选择器类型的数量决定。第二个关键字：SelectorType根据W3标准中的规定，css选择器分为4种类型：a,b,c,d。它们的个数计算规则是：a：如果css属性声明写成style=""，则个数为1，否则为0b：id选择器的个数c：class选择器，属性选择器（如type="text"),伪类选择器的个数(eg:::hover)d:标签名(eg:p,div),伪类(eg::before)比较不同css选择器的权重时，按照a=>b=>c=>d的顺序进行比较。从第一个选择器类型a的计算规则可以看出：html代码的style属性中写的csscss选择器中写的css属性优先级最高。id选择器(b)比类选择器(c)具有更高的优先级。这也符合我们通常的经验。还有一些你没有提到的css选择器，它们是如何计算权重的？除了上面Specificity计算规则中的css选择器类型，还有一些选择器如：*,+,>,:not()等，这些选择器应该如何计算其权重呢？答案是这些选择器是不会计入css的权重的：）有一个选择器需要特别注意：:not()，虽然不计权重，但是里面写的css选择器是需要计算权重的.如果计算后a、b、c、d都相同怎么办？默认行为是：当特异性相同时，最后声明的css选择器将生效。如果我重复相同的cssselectorytype，权重会增加吗？我们来做个实验，我们声明一个html节点：
在css中，我们添加两个selectors:.testClass.testClass{background-color:red;}.testClass{background-color:black;}如果重复的css选择器会被忽略，按照前面的规则，在最后声明css选择器才会生效，所以此div节点的背景颜色应为黑色。看一下结果：我们得到的结果是一个红色的div，也就是.testClass.testClass高于.testClass。所以结论是：重复的css选择器，它的权重会重新计算。关于!important：根据MDN，!important不在css选择器的权重计算范围内，之所以能使css选择器生效，是因为浏览器在遇到!important时会进行特殊判断。当多个！当需要比较重要时，会计算其权重，然后进行比较。一般来说，不推荐使用!important。如果你认为你必须使用它，你不妨先检查一下自己：始终考虑首先使用更高权重的css选择器，而不是仅在你的目的是覆盖来自第三方的css时才使用!important（例如：Bootstrap、normalize.css)，在页面范围内使用它！重要的是当你编写第三方插件时永远不要使用它！重要的永远不要在整个网站上使用它！重要的一些误导性信息当我搜索有关css权重的信息时，我看到下图。看似很有道理，其实是错误的！我们来做个简单的测试：根据图中的计算公式：如果一个css选择器包含11个class选择器类型，另一个选择器是1个id选择器类型。那么class选择器的权重就会高于id选择器的权重。让我们试试吧Try:.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass.testClass{background-color:red;}#testId{背景色：黑色；}看看结果：结果显示id选择器的权重还是比较高的。虽然我们在实际编码过程中很少有超过10个类，万一发生了，只有知道权重的真实计算和比较规则才能正确处理~想了解更多多前端和数据可视化？这里是我的D3.js，数据可视化的github地址，欢迎star&forkD3-blog如果觉得这篇文章不错，不妨点击下方链接关注：直接联系我？邮箱：ssthouse@163.com
