温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

6-选择器优先级别

发布时间:2020-07-13 18:38:58 来源:网络 阅读:134 作者:代码老兵 栏目:web开发

选择器优先级别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>

    <style>
        /*标签选择器*/
        div{
            color: red;
        }
        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div>我是div</div>
</body>
</html>

代码:
“*” 是通配符,可以匹配所有的标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>

    <style>
        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div>我是div</div>
</body>
</html>

代码:当前div标签的颜色是绿色,因为是就近原则,div标签与green设计的样式最近。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>

    <style>
        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div class="test1">我是div</div>
</body>
</html>

代码:类选择器 > 标签选择器

6-选择器优先级别

上图:可以看到 类选择器 是 优先于 标签选择器的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <!--
    1.相同级别的选择器:a.就近原则  b.叠加原则
    2.优先级:
        类选择器 > 标签选择器
    -->
    <style>
        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        .test2{
            color: purple;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div class="test1 test2">我是div</div>
</body>
</html>

代码:
在div标签中在加一个 test2类标签(针对同一个标签,类标签可以同时加多个);
设计test2类标签为紫色。

6-选择器优先级别

上图:图中是紫色;当前有test1和test2两个类选择器,相同类别是就近原则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <!--
    1.相同级别的选择器:a.就近原则  b.叠加原则
    2.优先级:
        id选择器 > 类选择器 > 标签选择器
    -->
    <style>

        /*id选择器*/
        #main{
            color:mediumvioletred;
        }

        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        .test2{
            color: purple;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div id="main" class="test1 test2">我是div</div>
</body>
</html>

代码:id选择器 > 类选择器

6-选择器优先级别

上图:
id选择器 优于 类选择器; 注意id是唯一的,同一个标签不可以设置多个id,否则id选择器就会失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <!--
    1.相同级别的选择器:a.就近原则  b.叠加原则
    2.优先级:
        id选择器 > 类选择器 > 标签选择器
    -->
    <style>

        /*复合选择器*/
        div.test1{
            color: pink;
        }

        /*id选择器*/
        #main{
            color:mediumvioletred;
        }

        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        .test2{
            color: purple;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div id="main" class="test1 test2">我是div</div>
</body>
</html>

代码:id选择器 > div+类选择器(复合选择器)

6-选择器优先级别

上图:颜色没有变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <!--
    1.相同级别的选择器:a.就近原则  b.叠加原则
    2.优先级:
        id选择器 > 类选择器 > 标签选择器
    -->
    <style>

        /*复合选择器*/
        div.test1{
            color: pink;
        }

        div#main{
            color: cornflowerblue;
        }

        /*id选择器*/
        #main{
            color:mediumvioletred;
        }

        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        .test2{
            color: purple;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div id="main" class="test1 test2">我是div</div>
</body>
</html>

代码:div+id选择器(复合) > id选择器

6-选择器优先级别

选择器的针对性越强,它的优先级就越高

选择器的权值:
通配选择符(*):0
标签: 1
类: 10
属性: 10
伪类: 10
伪元素: 10
id: 100
important: 1000
原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先(就近)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级别</title>
    <!--
    1.相同级别的选择器:a.就近原则  b.叠加原则
    2.优先级:
        id选择器 > 类选择器 > 标签选择器
    -->
    <style>

        /*复合选择器*/
        div.test1{
            color: pink;
        }

        div#main{
            color: cornflowerblue;
        }

        /*id选择器*/
        #main{
            color:mediumvioletred;
        }

        /*类选择器*/
        .test1{
            color: goldenrod;
        }

        .test2{
            color: purple;
        }

        /*标签选择器*/
        div{
            color: red;
        }
        div{
            color: green !important;
        }

        /*通配符*/
        *{
            font-size: 50px;
        }

    </style>

</head>
<body>
    <div id="main" class="test1 test2">我是div</div>
</body>
</html>

代码:在标签选择器中加了一个 !important,所以其当前的权值是1000+1=1001

6-选择器优先级别

  • 优先级排序

important > 行内设计 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web
AI