7 CSS选择器优先级-Toy模板网

这篇具有很好参考价值的文章主要介绍了7 CSS选择器优先级。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

7 选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。文章来源地址https://www.toymoban.com/news/detail-662072.html

/*
!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>

到了这里，关于7 CSS选择器优先级的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！