CSS高阶知识点-CSS权值计算方法

很多小伙伴在学完 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 的前端微课进行学习。