至今头条

7 CSS选择器优先级

2023-08-21 16:26 由 生而自由爱而无畏 发表于 #前端开发
7 选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

/*
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1 内联样式表的权值最高               style=""           1000；

2 统计选择符中的ID属性个数。         #id                100

3 统计选择符中的CLASS属性个数。      .class             10

4 统计选择符中的HTML标签名个数。     标签名              1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器的优先级</title>
</head>

<style>
    /*
    行内选择器:1000  id:100  class:10  标签名:1
    !important
    */

    /*#i1{*/
    /*    color: red;*/
    /*}*/
    /*.c1{*/
    /*    color: gold;*/
    /*}*/
    /*div{*/
    /*    color: blue;*/
    /*}*/

    /*.c2 .c3 .c5{*/
    /*    color: red;*/
    /*}*/
    /* #i2{*/
    /*    color: rebeccapurple;*/
    /* }*/

    /*.c2 .c4 div{*/
    /*    color: green;*/
    /*}*/

    /*.c2 .c3 .c4 div{*/
    /*    color: lightcoral;*/
    /*}*/

    /*.c2 .c4 .c5{*/
    /*    color: lightskyblue;*/
    /*}*/

    /*.c5{*/
    /*     color: chartreuse!important;*/
    /* }*/

</style>

<body>

<div id="i1" class="c1">alvin</div>

<div class="c2">
    <div class="c3">
        <div class="c4">
            <div class="c5" id="i2" style="color: orange">item</div>
        </div>
    </div>
</div>

</body>
</html>

热门相关：总裁别再玩了   今天也没变成玩偶呢   异世修真邪君   今天也没变成玩偶呢   拒嫁豪门，前妻太抢手