很多小伙伴在学完 CSS 之后对于选择器的选择还是比较随意，导致有时候可能出现 CSS 冲突。其实出现 CSS 冲突的根本原因，是开发者对 CSS 选择器的权重理解不到位所致。接下来的这篇文章，小编就来介绍如何进行 CSS 权重计算。

权重介绍

首先，什么是 CSS 权重呢？CSS 的权重，是选择器的相对重要程度值，也可以叫权值。这个权值决定了选择规则的优先级。通常我们对 CSS 的优先级的规则主要有下面三条：

1.CSS 权值不同时，权值高的优先；

2.CSS 权值相同时，后定义的规则优先；

3. CSS 属性后面加 ​ !important​  时，无条件绝对优先；

只要得知权值的大小，就可以根据上面的规则进行比较。

权重计算

权重的计算方式得先得到基础的选择器的权重才能进行计算，基础选择器的权重如下：

第一等级选择器：行间样式（内联样式）

第二等级选择器：id 选择器

第三等级选择器：class 选择器，伪类选择器，属性选择器

第四等级选择器：标签选择器，伪元素选择器

通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器：权重为0。

（权重为零表示对计算结果不影响，所以可以不纳入计算）

权值的计算公式为：（第一等级选择器*个数，第二选择器*个数，第三选择器*个数，第四选择器*个数）

权重比较

根据权值计算公式，得出一个四元组，通过逐一比较四元组的大小，得出权重的大小。

比如有一权重计算结果为（1,0,2,4）,另一权重计算结果为（1,0,2,3），则应用第一种权重所属的选择器。

案例

<ul id="nav" class="nav">
    <li class="active" id="first"><a href=""></a></li>
</ul>

如上所示HTML代码，选中a的方式有如下几种：

​ul#nav li.active a​ 权值为（0,1,1,3）；

​ul li.active a​ 权值为（0,0,1,2）；

​ul.nav li.active a​ 的权值为（0,0,2,2）；

​ul#nav li#first a​ 的权值为（0,2,0,2）；

如果样式在行间（也就是行间样式），权值为（1,0,0,0） ；

如果某项 CSS 属性后面带 ​!important​ 时，权值最大。

总结

1.     进行权重比较的时候，按顺序从左往右进行比较；

2.     权值相同的情况下，后者优先进行渲染（也就是样式覆盖）；

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

小结

以上就是 CSS 权重计算的方法。该方法虽然在工作中比较少遇到，但一旦遇到了 CSS 冲突，该方法就有了用武之地。而且如果作为求职者的话，前端面试的 HR 有时候会问到权重计算的问题，所以各位想要往前端方向发展的小伙伴们还是要掌握这项技能。

更多前端高阶知识点，可以前往 W3Cschool 的前端微课进行学习。