18.选择器权重（优先级）

最新推荐文章于 2023-10-07 13:03:51 发布

Keeling1720

最新推荐文章于 2023-10-07 13:03:51 发布

阅读量3k

点赞数 1

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113958598

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

    样式的冲突：
        - 当我们通过不同的选择器，选中相同的元素时，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
    发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

    选择器的权重：
        内联样式：       1000
        id选择器：       100
        类和伪元素选择器：10
        元素选择器：      1
        通配选择器：      0
        继承的样式    没有优先级
    比较优先级时，需要将所有的选择器的优先级进行相加运算，最后优先级越高，越优先显示（分组选择器是单独计算的）
    选择器的累加不会超过其数量级，例如类选择器累加最大值不会到100，顶多到90（可以这么记，你想记99也行）
    如果优先级相同，则优先使用比较靠下的样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器权重</title>
    <style>
        /**
            样式的冲突：
                - 当我们通过不同的选择器，选中相同的元素时，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
            发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

            选择器的权重：
                内联样式：       1000
                id选择器：       100
                类和伪元素选择器：10
                元素选择器：      1
         */
        #box1{
            background-color: orange;
        }

        #div{
            background-color: yellow;
        }

        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1" class="red" style="background-color: cornflowerblue">我是一个div</div>
</body>
</html>

显示结果：
在这里插入图片描述
这里只给了内联样式选择器的显示结果，如果想验证其他选择器的优先级，可以逐一验证，先去掉内联选择器的样式，再去掉id选择器的样式。。。。看是否符合。

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器权重</title>
    <style>
        #box1{
            background-color: orange;
        }

        div#box1{
            background-color: yellow;
        }

        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1" class="red">我是一个div</div>
</body>
</html>

显示结果变为黄色：
在这里插入图片描述
注意：如果想要越级到达巅峰（优先级超过内联样式），那么只需要在样式后边加上!important
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器权重</title>
    <style>
        #box1{
            background-color: orange!important;
        }

        div#box1{
            background-color: yellow;
        }

        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1" style="background-color: red">我是一个div</div>
</body>
</html>

此时显示结果为橙色：
在这里插入图片描述
易错点：
!important要写在分号（;）前面

Keeling1720

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
18.选择器权重（优先级）

样式的冲突： - 当我们通过不同的选择器，选中相同的元素时，并且为相同的样式设置不同的值时，此时就发生了样式的冲突发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重：内联样式： 1000 id选择器： 100 类和伪元素选择器：10 元素选择器： 1 通配选择器： 0 继承的样式没有优先级 ...
复制链接

扫一扫