CSS权重概念以及应用

目录

一、 权重概念：

二、css权重的理解：

三、css优先级规则：

四、权值的计算：

五、通配符选择器的应用

---

一、 权重概念：

　　权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。

　　权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

 

二、css权重的理解：

　　每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；

　　css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定定义样式规则的优先级次序；

从上面对CSS权重概念中得知，原来所谓为的css选择规则的优先级是按照 css选择器的权值的比较 来确定的。

 

三、css优先级规则：

　　　1.css选择规则的权值不同时，权值高的优先；

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

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

四、权值的计算：

!important——无限大
行间元素——1000
ID——100
class | 属性 | 伪类——10
标签 | 伪元素——1
通配符——0
 

　　权值等级划分， 一般来说是划分4个等级：

　　　　第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；

　　　　第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；

　　　　第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

　　　　第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

　　　　此外，通配符选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

 

　　权值计算 公式：

　　　　权值 =第一个选择器权值+第二个选择器权值+第三个选择器权值；

注意：在权值的相加与比较的过程中特别注意，权值的进制不是10进制也不是我们所熟悉的二进制、十六进制，而是256进制；权值中的1和10差的不是一星半点。

 

五、通配符选择器的应用

通配符的特点：

         1、选择所有标签

          2、权值为0

在开发的过程中我们使用的标签它都有自己的特性，如很多标签都有padding和margin值，但是对我们的开发有没帮助反而还会有影响；这时我们就可以在一开始编程给它进行初始化，通配符选择器就刚好匹配，而且通配符选择器的权值为0它不会对后面的调试有过多的约束。

 

　　总结，这个比较规则就是三点

　　　　1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；

　　　　2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；

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