CSS中的权重划分

菜园前端

于 2023-03-08 20:44:50 发布

阅读量83

点赞数

分类专栏：菜鸟前端 CSS3 文章标签： css html Powered by 金山文档

本文链接：https://blog.csdn.net/qq2603375880/article/details/129411141

版权

菜鸟前端 CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章详细解释了CSS选择器权重的规则，包括基础案例中的ID选择器与类选择器的优先级对比，以及不同层级下的选择器权重影响，如后代和子代选择器。此外，文中还提及了一种全面的前端笔记资源，包含从入门到面试的前端知识，并支持实时效果预览。

摘要由CSDN通过智能技术生成

原文链接：https://note.noxussj.top/?source=csdn

选择器权重划分代表有多个选择器同时选中同一个元素时，应该以谁的为准，这里就会涉及到权重的问题。

现实生活举例

假设你的好朋友小明和路人小红同时掉水里，你先救谁？那你可能会先救小明，因为小明的优先级/权重比较高。

基础案例

在同一层级下

同一层级代表通过单个选择器直接选中某个元素。

以下案例存在类选择器和 id 选择器，两个选择器同时都选中了 “小明” 这个 div 并且都设置了字体颜色。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .person {
                color: green;
            }
            #xiaoming {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="person" id="xiaoming">小明</div>
    </body>
</html>

最终结果是显示了红色的 "小明"，id 选择器优先级相对较高。

在演练场中尝试一下

其他的权重不需要特意记住，只需要知道以下前四个优先级即可。

!important > 内联样式 > ID 选择器 > 类选择器 > （标签选择器、伪类选择器、属性选择器...）

不同层级下

不同层级指后代、子代选择器的优先级问题，层级越深优先级越高。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box2 {
                color: green;
            }
            .box1 .box2 {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">小明</div>
        </div>
    </body>
</html>

最终结果是显示了红色的 "小明"，因为 .box1 .box2 是两层，而 .box1 是一层。

在演练场中尝试一下

最全面的前端笔记来啦，包含了入门到入行的笔记，还支持实时效果预览。

小伙伴们不需要再花时间去写笔记，或者是去网上找笔记了。

面试高频提问和你想要的笔记都帮你写好了。

支持移动端和 PC 端阅读，深色和浅色模式。

原文链接：https://note.noxussj.top/?source=csdn