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

来源：互联网发布：polycom网络设置编辑：程序博客网时间：2024/06/11 14:35

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

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

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>

0 0