CSS选择器优先级是如何计算的_CSS选择器权重规则一览

CSS选择器权重是浏览器用于决定样式优先级的四元组(a,b,c,d)：a为内联样式，b为ID数，c为类/属性/伪类数，d为标签/伪元素数，权重按位比较，越高者生效。

在CSS中，选择器的优先级决定了当多个规则作用于同一个元素时，哪一个规则会被应用。优先级是根据选择器的组成来计算的，这个过程也被称为“权重计算”。理解CSS选择器权重规则，能帮助开发者更准确地控制样式表现。

什么是CSS选择器权重？

每个CSS选择器都有一个对应的权重值，浏览器通过比较权重来决定哪条样式规则生效。权重越高，优先级越高。

权重不是相加的数字，而是按位比较的“四元组”，格式为：(a, b, c, d)

常见选择器权重示例

以下是不同类型选择器的权重计算方式：

立即学习“前端免费学习笔记（深入）”；

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57

查看详情

• (1,0,0,0) —— [style="..."] 内联样式
• (0,1,0,0) —— #header ID选择器
• (0,0,1,0) —— .nav 类选择器
• (0,0,1,0) —— [type="text"] 属性选择器
• (0,0,1,0) —— :hover 伪类
• (0,0,0,1) —— div 标签选择器
• (0,0,0,1) —— ::before 伪元素
• (0,0,0,0) —— * 通用选择器、继承样式

复合选择器的权重计算

当选择器由多个部分组成时，权重是各部分之和。

• #header .nav a → (0,1,1,1)
• div#main input[type="text"]:focus → (0,1,2,2)
• .btn:hover::after → (0,0,2,1)

注意：逗号分隔的选择器各自独立计算优先级。例如 .a, #b { color: red } 的优先级由 #b 决定。

!important 和继承的影响

!important 可以打破正常优先级规则，但应谨慎使用：

• 带有 !important 的声明优先级最高（除非遇到另一个同权重但更晚出现的 !important）
• 继承的样式优先级非常低，通常会被任何直接匹配的规则覆盖
• 通用选择器 * 和继承样式几乎不会影响优先级竞争

基本上就这些。掌握权重计算逻辑后，就能避免很多“为什么样式没生效”的问题。写样式时尽量避免依赖 !important，合理组织选择器结构，让CSS更可维护。

以上就是CSS选择器优先级是如何计算的_CSS选择器权重规则一览的详细内容，更多请关注php中文网其它相关文章！