CSS选择器的优先级

最新推荐文章于 2025-03-22 10:24:03 发布

kormondor

最新推荐文章于 2025-03-22 10:24:03 发布

阅读量1.4k

点赞数 1

分类专栏：前端知识巩固

本文链接：https://blog.youkuaiyun.com/kormondor/article/details/88232301

版权

本文详细探讨了CSS选择器的优先级，通过一个生动的黑板修改例子，阐述了内联样式、ID选择器、类选择器和元素选择器的优先级关系，并介绍了选择器的权重计算规则。文中还涉及了属性选择器、伪类选择器的权重，以及!important的特殊地位。文章以实际案例帮助读者理解并验证选择器优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇博文由于夹杂了本人的理解以及方便初学者浏览的推导过程和基本概念补充，故篇幅较长。结论在最后，可直接跳至结尾查看

更多文章请查看:sawyersven.github.io

在了解今天的核心内容选择器的优先级之前，我们先复习一下关于CSS选择器：

既然我们要搞懂的是CSS选择器的优先级，那我们首先肯定要知道CSS有哪些选择器：

以上7种选择器基本上包括了我们日常工作中会用到的绝大多数选择器形式，此外还有!important和元素内联的style属性，这两种我们后边会讲。

复习了关于CSS选择器的内容，我们接下来走进今天的主题 - CSS选择器的优先级

<div class="blackboard">
    <p>由于体育老师生病，所以下午的体育课改上数学课</p>
</div>

.blackboard{
   
    background:#000 //黑板是黑的噻
}
p{
   
    color:#fff;  // 老师用白色粉笔写的
}

于是同学们在上课的时候就看到了黑板上的内容：


p{
   
    color:#fff;  //老师先用白色粉笔写
}

p{
   
    color:#ff0000; //班长后用红色粉笔写
}

所以黑板上的字就变成了这样：

班上调皮捣蛋的阿辉在打闹的时候不小心把一瓶蓝色的墨水洒到了黑板上，于是这行字又变成了蓝色墨水色:

 <div class="blackboard">
    <p class="blue-ink">由于体育老师生病，所以下午的体育课改上数学课</p>
</div>

p{
   
    color:#fff //老师先用白色粉笔写
}
.blue-ink{
   
    color:blue; // 阿辉泼上去的蓝色墨水
}
p{
   
    color:#ff0000; //班长后用红色粉笔写
}

班长觉得黑板上蓝色的字很难看清，就又用红色粉笔准备写成红色，但是发现由于墨水的湿度黑板上用粉笔已经写不了了，所以很生气。跑去办公室叫来了班主任。

班主任灵(瞎)机(机)一(8)动(搞)用涂改液涂在墨水的印记上，然后这行字又变成了白色的：

  <p id