CSS选择器权重解析：如何计算优先级？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS选择器权重解析：优先级计算全攻略》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

CSS优先级由选择器的权重决定，权重越高样式越优先。权重计算分为四位：内联样式1,0,0,0，ID选择器0,1,0,0，类/属性/伪类选择器0,0,1,0，元素/伪元素0,0,0,1；常见对比如p(0,0,0,1)、.class(0,0,1,0)、#id(0,1,0,0)；权重相同时后写的生效；!important可强制覆盖但应谨慎使用；内联样式优先级最高但应避免滥用；少用ID以减少覆盖问题。

CSS选择器的优先级决定了当多个规则作用于同一个元素时，哪一个规则会被应用。很多人在写样式的时候会遇到“为什么我的样式没生效”的问题，其实大多数时候都是优先级的问题。理解CSS选择器的权重计算规则，能帮你更高效地控制样式覆盖顺序。

什么是CSS优先级？

每个CSS选择器都有一个对应的“权重”，浏览器根据这个权重来判断哪个样式应该被最终应用。权重越高，优先级越高。如果两个规则冲突，权重高的那个就会胜出。

优先级是由选择器的类型和数量决定的，不是靠书写顺序或样式表的位置。

权重是如何计算的？

CSS优先级是通过一个四位数（有时简写为三位）来表示的，从高到低分别是：

• 内联样式：1,0,0,0
• ID选择器：0,1,0,0
• 类选择器、属性选择器、伪类：0,0,1,0
• 元素选择器、伪元素：0,0,0,1
• 通用选择器、否定伪类等不影响权重

举个例子：

/* 权重：0,1,1,1 */
#main .content p {
  color: red;
}

/* 权重：0,0,1,3 */
div.content p span {
  color: blue;
}

虽然第二个选择器更长，但它的权重比第一个低，所以第一个规则会生效。

常见选择器的权重对比

下面是一些常见选择器的权重对比，帮助你快速判断谁更高：

• p → 0,0,0,1
• .class → 0,0,1,0
• #id → 0,1,0,0
• p.class → 0,0,1,1
• p#id → 0,1,0,1
• div ul li > p → 0,0,0,4
• [type="text"] → 0,0,1,0
• :hover → 0,0,1,0
• ::before → 0,0,0,1

可以看出，只要有一个ID选择器，基本就能压过很多其他组合。这也是为什么我们常说“少用ID写样式”的原因之一。

!important 和内联样式的特殊处理

• !important 是一种强制覆盖机制，但它不属于选择器本身的优先级系统。它更像是一个“作弊手段”。如果你滥用它，后期维护会变得非常困难。
• 内联样式的优先级是最高的（除非遇到带 !important 的规则），所以尽量避免使用 style="..."，除非确实有需要动态控制样式的情况。

一些实际中需要注意的地方：

• 两个规则权重相同的情况下，后写的那个生效
• 使用 !important 要谨慎，只在必要时使用，比如覆盖第三方库的样式
• ID选择器很容易造成样式难以覆盖的问题，建议多用类名代替

基本上就这些。优先级听起来有点复杂，但只要你记住不同选择器的权重级别，并在开发过程中注意检查样式覆盖关系，就可以避免大部分样式冲突问题。

终于介绍完啦！小伙伴们，这篇关于《CSS选择器权重解析：如何计算优先级？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！