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

新闻中心 NEWS CENTER

2025-10-30

浏览次数：次

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

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

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

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

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

a：内联样式的权重（style属性），有则为1，否则为0 b：ID选择器的数量 c：类选择器、属性选择器和伪类的数量 d：标签选择器和伪元素的数量

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

(1,0,0,0) —— [style="..."] 内联样式
(0,1,0,0) —— #header ID选择器
(0,0,1,0) —— .n* 类选择器
(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) —— * 通用选择器、继承样式

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

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

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

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

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

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