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

雨点打透心脏的1/2处 2022-06-16 07:13 202阅读 0赞

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

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

--------------------

# 1.优先级规则 #

![这里写图片描述][SouthEast]

--------------------

# 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>
            
            <div id="box" class="div1" style="background: pink;"></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>
            
            <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>

[SouthEast]: /images/20220616/931a13928769403dad8408962c2f23ba.png