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权值计算的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！