一天搞定CSS： CSS选择器优先级--08

最新推荐文章于 2020-08-14 19:48:54 发布

Java仗剑走天涯

最新推荐文章于 2020-08-14 19:48:54 发布

阅读量489

点赞数

分类专栏：前端基础HTML5/CSS3 文章标签： css 选择器选择器优先级

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71440766

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

选择器优先级：是指代码的执行顺序

通俗的说，就是多个选择器同时对一个标签分别添加样式，那么这个标签显示那个选择器设置的样式

1.优先级规则

这里写图片描述

2.规则1和2说明

优先级相同，谁后谁优先
优先级不同，优先级高的优先

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

            /*1.选择器的优先级一至的情况下，谁在后谁的优先级就高*/
            /*div{
                width: 100px;
                height: 100px;
                background: red;
            }
            div{
                width: 100px;
                height: 100px;
                background: green;
            }*/


            /*2.选择器的优先级不一致的情况下，会选择优先级高的---这里class>div*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
            }
            div{
                width: 100px;
                height: 100px;
                background: green;
            }

        </style>
    </head>
    <body>
        <!--
            优先级         代码执行的顺序
                选择器的优先级一致的情况下，谁在后谁的优先级就高
                选择器的优先级不一致的情况下，会选择优先级高的
        -->
        <div class="box"></div>
    </body>
</html>

3.规则3说明

行间>id>class>标签>通配符

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*3.行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）*/
            body *{
                height: 100px;
                background: red;
            }
            div{
                height: 100px;
                background: green;
            }
            .div1{
                height: 100px;
                background: blue;
            }
            #box{
                height: 100px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <!--
            优先级         代码执行的顺序

                行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）
        -->
        <div id="box" class="div1" style="background: pink;"></div>
        <!--<div id="box" class="div1"></div>-->
        <!--<div class="div1"></div>-->
        <!--<div></div>-->
    </body>
</html>

4.规则4说明

包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*4.包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低*/
            #div3{
                height: 100px;
                background: red;
            }
            /*10+100=110*/
            .box2 #div3{
                height: 100px;
                background: green;
            }
            /*100+10=110*/
            #div1 .box3{
                height: 100px;
                background: yellow;
            }
            /*100+10=110*/
            #div2 .box3{
                height: 100px;
                background: blue;
            }
            /*100+1+1=102*/
            #div1 div div{
                height: 100px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <!--
            优先级         代码执行的顺序


                包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低
                假设个选择器的值设置为：
                行间样式            1000
                id选择器           100
                类选择器            10
                标签选择器           1

        -->
        <div class="box1" id="div1">
            <div class="box2" id="div2">
                <div class="box3" id="div3"></div>
            </div>
        </div>
    </body>
</html>

5.规则5说明

群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        /*5.群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了*/
            div,p,h1{
                width: 200px;
                height: 100px;
                background: red;
                margin-top: 50px;
            }
            div{
                background: green;
            }
        </style>
    </head>
    <body>
        <!--
            优先级         代码执行的顺序
    群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了
        -->
        <div></div>
        <p></p>
        <h1></h1>
    </body>
</html>