css优先级和权重

时间:2024-11-12 13:32:50

1. 权重概念:

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

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

2.css权重的理解:

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

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

从“css权重的理解”中得知,原来所谓为的 css选择规则的优先级 是按照 css选择器的权值的比较 来确定的(可能光看这句还是一头雾水的,不急,看完我接下来介绍 估计你马上会有豁然开朗的感觉,但,请先记住这句话);

3.css优先级规则:

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

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

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

4. 权值的计算:

css优先级和权重

  权值等级划分, 一般来说是划分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;

  权值计算 公式:

    权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;

  权值比较 规则:

    当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢,因为为在网上查资料的时候,看到好多博客是把这个权重值理解成了所有等级的数字之和了】说到这里 再 配合下图 大家应该就差不多理解了,

css优先级和权重

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

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

    2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);

    3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);

  验证 第一点:

    例子:

 

    如果对css权重理解不透彻的话,看到上边的例子,估计会有很大一部分人都会认为最后 p 的背景色是 green; 为什么呢? 因为理解成了错误的权值计算规则

    qz1 = 100 + 1 = 101

    qz2 = 1 + 10*11 + 1 = 112

    qz1 < qz2

     所以 第二条样式 优先级高,背景色为 green;

    NO,NO,NO....结果却是 背景色为 red;如图:

css优先级和权重

    所以也就印证了,上面所说的权值比较规则 第一条。

  验证 第二点:

    例子:

 

    展示效果,如图:

css优先级和权重

    所以也就印证了,上面所说的权值比较规则 第二条;

  验证 第三点:

    例子:

 

    如果没有 !important 的样式规则时,相信大家都知道内联样式的优先级是最高的,背景色为 orange;

    加了 !important 之后,没有任何理由的 它的优先级就最高了,背景色为 yellow;

    展示效果, 如图:

css优先级和权重

    所以也就印证了,上面所说的权值比较规则 第三条;

5. 选择器的优先级:

通过上边的分析 我们就得出了单个选择器的优先级比较:

  css属性!important

  》内联样式

  》ID选择器(#id)

  》类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]

  》元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)

  》通用选择器(*)

  》继承的样式

  关于伪类的部分,这篇文章总结还挺好的(尤其是 :not(选择器) 伪类不参与优先级计算,但:not(选择器) 里边的 “选择器” 是参与优先级计算的 这部分),可参考:

  地址:https://www.cnblogs.com/starof/p/4387525.html

  简单说一下继承:

  继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明:

    样式定义:body{ color:red; }

    应用举例代码:<p>CSS的<strong>层叠和继承</strong>深入探讨</p>

    这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承是CSS的一部分的原因。