无需登录 数据私有 本地保存

CSS选择器优先级计算器 - 层叠权重比较

前端设计 开发工具 CSS 优先级 计算
82
0
0
0
「CSS特异性」(Specificity)：CSS中用于决定当多个规则应用于同一元素时哪个规则优先生效的权重计算机制。特异性越高的规则优先级越高，越容易生效。特异性按照四元组(a,b,c,d)进行量化比较。 「四元组」(a,b,c,d)：W3C规范中定义的特异性数值表示方式。a为ID选择器计数，b为类/属性/伪类选择器计数，c为元素/伪元素选择器计数，d为!important声明标记。比较时从a到d逐位比较。 「层叠」(Cascading)：CSS的核心机制之一，决定了当多条样式规则冲突时的优先级判定流程。层叠按照来源(用户代理、用户、作者)、重要性(!important)、特异性、源码顺序四个维度依次判定。 「ID选择器」(ID Selector)：使用#号开头的选择器，如#header、#main-content。在四元组中对应a分量，每个ID选择器为a增加1。ID选择器的权重远高于类选择器。 「类选择器」(Class Selector)：使用点号开头的选择器，如.nav、.container。在四元组中对应b分量，每个类选择器为b增加1。类选择器还包括属性选择器(如[type=text])和大多数伪类(如:hover)。 「元素选择器」(Element Selector)：也称类型选择器(Type Selector)，直接使用HTML标签名的选择器，如div、a、h1。在四元组中对应c分量，每个元素选择器为c增加1。 「伪类」(Pseudo-class)：以单冒号:开头的选择器修饰符，用于选择元素的特定状态或位置，如:hover、:first-child、:nth-of-type(2n)。大多数伪类在四元组中计入b分量。 「伪元素」(Pseudo-element)：以双冒号::开头的选择器，用于选择元素的特定部分，如::before、::after、::first-line。在四元组中计入c分量。 「:not()伪类」：否定伪类，匹配不匹配其参数的选择器的元素。:not()本身不贡献权重，但其参数的选择器权重会叠加到外层。 「:is()伪类」：匹配伪类，接受选择器列表并匹配其中任何一个选择器都能匹配的元素。:is()的权重取其参数列表中权重最高的那个选择器的值。 「:where()伪类」：零权重伪类，功能与:is()类似，但其权重始终为(0,0,0,0)，不贡献任何特异性。常用于编写默认样式或可被轻易覆盖的基准样式。 「:has()伪类」：关系伪类，匹配包含指定后代或子元素的元素。其权重计算方式与:is()类似，取参数中的最高权重。 「!important」：CSS声明级别的优先级标记，用于强制覆盖所有非!important的同属性声明。当两个!important声明冲突时，按正常特异性规则比较。四元组中d分量为1表示存在!important。 「源码顺序」(Source Order)：当两个选择器的特异性(a,b,c,d)完全相同时，后在CSS代码中出现的规则会覆盖先出现的规则。这是层叠机制中的最终判定标准。 「选择器权重溢出」(Specificity Overflow)：指选择器嵌套层级过深或组合过多导致权重数值过高的现象。权重过高的选择器难以被覆盖和维护，是代码质量的警示信号。 「特异性战争」(Specificity War)：一种反模式，指开发者为了覆盖现有样式而不断增加选择器权重的恶性循环。最终导致项目中充斥着超高权重的选择器，严重损害可维护性。
🔧 相关工具