What is CSS specificity?

CSS specificity is a weight assigned to a CSS selector that determines which rule is applied when multiple rules target the same element. It's calculated as a three-part value (A, B, C): A counts ID selectors (most powerful), B counts class/attribute/pseudo-class selectors, and C counts element type and pseudo-element selectors. The selector with the highest total wins.

Why does (1,0,0) always beat (0,9,9)?

CSS specificity is not a simple decimal number — it's compared column by column from left to right. One ID (1,0,0) always beats any number of classes (0,9,9) because the A column is compared first. Think of it like version numbers: 1.0.0 > 0.9.9 even though 100 > 99 in regular math.

Does !important affect specificity?

!important is not a selector and does not change the (A,B,C) score. Instead, it creates a separate override layer that ignores specificity entirely. Inline styles also sit outside the normal specificity system — they have an effective (1,0,0,0) weight that overrides all stylesheet rules. Avoid using !important for maintainability.

What is the specificity of :not(), :is(), and :where()?

:not() itself adds no specificity, but the selectors inside it do. :is() uses the highest specificity of its argument list. :where() always has zero specificity — it's designed specifically for low-specificity matching, making it useful in utility-first CSS systems.

How can I reduce specificity wars in my CSS?

Common strategies include: using classes instead of IDs for styling, avoiding deeply nested selectors, keeping specificity flat with utility-first frameworks (Tailwind), using :where() for reusable base styles, and following a naming convention like BEM to keep selectors at a single class level (0,1,0).

CSS优先级计算器

计算并比较CSS选择器的优先级。即时查看(A,B,C)分解，通过条形图可视化，了解样式冲突时哪个选择器优先。

CSS选择器每行一个

快速示例:

CSS优先级工作原理：

A — ID选择器(#id)：每个计100分

B — 类(.cls)、属性([attr])、伪类(:hover)：每个计10分

C — 类型元素(div, p)、伪元素(::before)：每个计1分

使用方法

计算并比较CSS选择器的优先级。即时查看(A,B,C)分解，通过条形图可视化，了解样式冲突时哪个选择器优先。

1Type or paste one or more CSS selectors — one per line.
2Click the quick-example buttons to add common selectors instantly.
3Click 'Calculate' (or press Ctrl+Enter) to see the specificity scores.
4Each result shows an (A,B,C) badge, a numeric total, and bar charts for visual comparison.
5Click 'Show breakdown' on any result to see which parts contributed to the score.

主要功能

Calculates (A,B,C) specificity breakdown for any CSS selector
Compare multiple selectors side by side, sorted by specificity
Visual bar charts for instant comparison of A, B, C values
Detailed breakdown explaining each contributing selector part
Handles IDs, classes, attributes, pseudo-classes, and pseudo-elements

常见问题

了解更多

CSS Specificity Explained: How to Debug and Win Selector Conflicts