What is CSS specificity?

Specificity determines which CSS rule applies when multiple rules target the same element. It's calculated as (A, B, C): A=IDs, B=classes/attributes/pseudo-classes, C=type selectors.

How is specificity compared?

Compare A first, then B, then C. A selector with specificity (1,0,0) always beats (0,9,9). Equal specificity means the later rule in the stylesheet wins.

Does !important affect specificity?

!important overrides normal specificity entirely. The tool focuses on selector specificity; use !important sparingly as it breaks the natural cascade.

What about the universal selector and combinators?

The universal selector (*) and combinators (+, >, ~, ' ') have zero specificity and do not contribute to the (A, B, C) score.

Developer 免费无需注册

CSS Specificity Calculator

Calculate and compare CSS selector specificity (A, B, C).

正在加载工具…

关于此工具

Paste any CSS selector and instantly see its specificity score broken down into (A, B, C): A for ID selectors, B for classes/attributes/pseudo-classes, and C for type selectors/pseudo-elements. Compare two selectors to determine which one wins. Each part of the selector is highlighted and labeled so you understand exactly why a rule takes precedence. Includes common selector examples for quick reference.

使用方法

1 Type or paste a CSS selector into the input field.
2 See the (A, B, C) specificity score and a color-coded breakdown instantly.
3 Use the Compare mode to enter two selectors and find which one wins.
4 Review the selector breakdown to understand each contributing part.
5 Browse the examples section for common selectors and their specificity values.

关于此工具

使用方法

常见问题