CSS选择器的优先级

知识点1：

1.css选择器的优先级（!important(优先数值：∞)>行内式(优先数值：1000)>id(优先数值：100)>class(优先数值：10)>标签选择器(优先数值：1)>继承

2.同一选择器优先数值越高，优先级就越高。

3.无论多少个弟弟也大不过一个哥哥。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            color: red;
        }

        .c1{
            color: green;
        }

        div{
            color: orange;
        }

        .c2 .c3 .c4 .c5{
            color: yellow;
        }

        .c2 .c3 .c5{
            color: gray;
        }

        #i2{
            /color: blue;
        }

        .c5{
            color: purple!important;
        }

    </style>

</head>
<body>

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

<div class="c2">
    <div class="c3">
        <div class="c4">
            <p class="c5" id="i2" style="color: lightcoral">hulanxi</p>
        </div>

    </div>

</div>

</body>
</html>

 

posted @ 2022-05-23 20:13  呼长喜  阅读(418)  评论(0)  编辑  收藏  举报