6-选择器优先级别

qsdnet我想学编程

2019-10-25

选择器优先级别

<!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-选择器优先级别