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>
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/zczhaod/p/17640505.html

标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签
4235 0元 限免
Web前端页面制作快速入门
5747 9.8元