css的优先级和权重

最新推荐文章于 2024-07-25 14:15:14 发布

IN~Trying

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

原文链接：http://cache.baiducontent.com/c?m=wwEHaooj6HNmv-xL-nlbBluQBhRzvoycUJHWQjlV-uCcMpGXDZDywKJAsZS1rwMLGLcZWF2dqQD9m7Ig_B7So1eDJaCFWhaMPN3eW8wLXN6XbNYqz7Sz-gQzBRYK6q6yhfysRvHWtL_Hol1Kq6SsUq&p=c2759a40d7d012a05ab1d165174f&newp=c07bc716d9c15bff57e8950c504292695d

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css的优先级和权重

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个数的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢，因为为在网上查资料的时候，看到好多博客是把这个权重值理解成了所有等级的数字之和了】，说到这里再配合下图大家应该就差不多理解了，

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

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

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

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

验证第一点：

例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 选择器</title>
    <style type="text/css">
        #parent p { background-color: red;  }
        div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
    </style>
</head>
<body>
    <div id="parent">
        <div class="a b c d e f g h i j k">
            <p>xxxx</p>
        </div>
    </div>
</body>
</html>

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

qz1 = 100 + 1 = 101

qz2 = 1 + 10*11 + 1 = 112

qz1 < qz2

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

NO,NO,NO…结果却是背景色为 red；

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

验证第二点：

例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 选择器</title>
    <style type="text/css">
    /*
        1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推，
        2.完全相同的话，就采用 后者优先原则（也就是样式覆盖），
        3.有 !important 时，无条件绝对优先

        如下面的 示例：
     */
        #parent #child1 {background-color: red;} /* 权值: 0,2,0,0; */
        #parent #child1 {background-color: green;} /* 权值: 0,2,0,0; */
    </style>
</head>
<body>
    <div id="parent">
        <div id="child1">xxxxxx</div> 
    </div>
</body>
</html>

View Code
　　　　展示效果，如图：

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

验证第三点：

例子：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 选择器</title>
    <style type="text/css">
    /*
        1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推，
        2.完全相同的话，就采用 后者优先原则（也就是样式覆盖），
        3.有 !important 时，无条件绝对优先

        如下面的 示例：
     */
        #parent div#child1 { background-color: yellow !important;  } /* !important 无条件绝对优先 */
        #parent div#child1 {background-color: red;} /* 权值: 0,2,0,1; */
        #parent #child1 {background-color: green;} /* 权值: 0,2,0,0; */
    </style>
</head>
<body>
    <div id="parent">
        <div id="child1" style="background-color:orange;">xxxxxx</div> <!-- 权值：1, 0, 0, 0 -->
        <div id="child2">xxxxxx</div>
    </div>
</body>
</html>

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

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

展示效果,

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

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; }

应用举例代码：

CSS的层叠和继承深入探讨

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

转载于：这里跳转

IN~Trying

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css的优先级和权重

css的优先级和权重1. 权重概念：       权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。       权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。2. css权重的理解：    &nbsp
复制链接

扫一扫