CSS优先级-权重叠加计算

原创已于 2023-01-09 08:55:27 修改 · 588 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端随笔

于 2023-01-08 21:13:45 首次发布

文章详细解释了CSS选择器的优先级计算规则，从ID、类、标签到行内样式的选择器权重比较，强调了权重叠加时不逢十进一的原则。通过示例代码展示了选择器的层叠性，并证明通配符在权重计算中无权重。同时指出，父标签样式对子标签的继承具有最低优先级。

先上总结:

说明:

公式: (行内, Id, 类, 标签)

规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 后面的数量就无需比较了。如选择器1 (0, 0, 1, 0), 选择器2 (0, 0, 0, 3), 那么选择器1的优先级高于选择器2。如果所有的数值都一致的话, 说明两选择器相同, 那就依据css层叠性的特点. 浏览器会选择后一个选择器

备注:

权重叠加计算不是正常的加法计算, 不需要逢十进一。如标签是11 类是0 那么只可以是 (0, 0, 0 , 11), 不能是(0, 0, 1, 1)

* 通配符没有权重

无论父标签用了什么选择器并设置了什么样式, 对子标签来说都是继承, 继承的优先级永远是最低的。

准备:

先添加一段html代码

<div>
    <p>这是一个段落</p>
</div>

之后为了能更好地查看结果, 设置点字体样式, 由于咱代码简单, 就使用一个通配符选择器设置样式

* {
    font-family: 楷体;
    font-size: 60px;
 }

代码示例说明:

同级数量的比较

先写一个p标签选择器, 运行一下效果

/* （0, 0, 0, 1） */
 p {
    color: blue;
 }

再写一个后代选择器如下, 再运行一下效果

/* (0, 0, 0, 2) */
 div p {
    color: aqua;
 }

由于后者标签数量高于前者标签数量, 所以后者选择器高

建议: 可以把b步骤的代码放在a步骤的前面 ,这样可以更好地体现优先级的关系(优先级是没有层叠性的特点), 可以更好地排除层叠性的可能(虽然根本就没这可能, 只是方便理解), 以下示例皆是如此

不同级别的比较

设计一个类构造器

/* (0, 0, 1, 0) */
.son {
    color: darkslategray;
}

在p标签上加上类选择器

<div>
    <p class="son">这是一个段落</p>
</div>

由于类级别比标签高, 所以.son 选择器的优先级别高于div p选择器

通配符没有权重的问题

首先优先级是没有层叠性的特点的, 这个在建议中也有描述。

其次咱可以假设它具备权重, 那样的话它就不会有层叠行的效果

先写一个p标签选择器, 样式和之前的一样

p {
    color: blue;
 }

之后在它的后面写一个* p选择器

* p {
    color: yellowgreen;
 }

查看效果是文字的颜色是yellowgreen。

接下来把* p选择器的代码放在p选择器之上，再运行

这时候会发现字体颜色由原来的yellowgreen变为了blue。这就说明它并没有体现优先级, 而是体现出了层叠性的效果, 所以说通配符在权重叠加计算中没有任何权重

示例代码:

以下是我的实例代码, 请参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            权重计算: 
                1. 说明: (行内, Id, 类, 标签）
                2. 规则: 从左至右依次做个数上的比较, 如果同级数量一致, 则比较下一级个数, 直到某一级数量不一致, 则数量较大的一方选择器的优先级较高, 
                        后面的数量就无需比较了。 如选择器1 (0, 0, 1, 0), 选择器2 (0, 0, 0, 3), 那么选择器1的优先级高于选择器2。如果所有的数值都一致的话, 
                        说明两选择器相同, 那就依据css层叠性的特点. 浏览器会选择后一个选择器
            备注:
                1. * 通配符选择器没有权重
                2. 无论父标签用了什么选择器并设置了什么样式, 对子标签来说都是继承, 继承的优先级永远是最低的.
                3. 权重叠加计算不是正常的加法计算, 不需要逢十进一
         */ 
         /* 权重计算 */
         /* (0, 2, 0, 0) */
        #divBox #pBox {
            color: orchid;
        }

        /* （0, 1, 0, 0） */
        #pBox {
            color: orange;
        }

         /* (0, 0, 2, 0) */
         .dad .son {
            color: rebeccapurple;
         }
        
         /* (0, 0, 1, 1) */
        .dad p{
            color: chartreuse;
        }

        /* (0, 0, 1, 0) */
        .son {
            color: darkslategray;
        }

         /* (0, 0, 0, 2) */
         div p {
            color: aqua;
         }
         
         /* 通配符没有权重 */
         /* 假使 * 有权重, 那么即使是如下的顺序也不会前一个选择器也不会被后一个选择器覆盖 */
         /* （0, 0, 0, 1） */
         * p {
            color: yellowgreen;
         }
         /* （0, 0, 0, 1） */
         p {
            color: blue;
         }

         * {
            font-family: 华文行楷;
            font-size: 60px;
         }
    </style>
</head>
<body>
    <div class="dad" id="divBox">
        <!-- (1, 0, 0, 0) -->
        <p class="son" id="pBox" style="color: gold;">这是一个段落</p>
    </div>
</body>
</html>