CSS specificity is the core mechanism that determines the priority of styles, and determines which rule takes effect through the weight calculation of the selector. Inline styles score 1000 points, ID selectors score 100 points each, classes, attributes, and pseudo-classes score 10 points each, elements and pseudo-elements score 1 point each; different categories scores cannot be carried; for example, ten class selectors (100 points) are still lower than one ID (100 points). Abuse of !important should be avoided, understanding the order of inheritance and cascade, and analyzing style conflicts with browser tools.

CSS specificity is one of the core mechanisms that control style priorities. Simply put, when multiple CSS rules are applied to the same element, the browser will determine which rule actually takes effect by calculating the "specificity" of each rule.

What is CSS specificity?

Specificity can be understood as a "weight" system. Each selector has a specific score, which sums up determines which style rule will be applied eventually.

For example: If you write two rules that work on the <p></p> tag, one of which is p { color: red; } and the other is .highlight { color: blue; } , then the .highlight class with higher specificity will choose to win, and the text color will be blue.

How to calculate specificity?

Specificity consists of four types of "barrels", from high to low:

• Inline styles (such as style="color:red" ) → Each inline style scores 1000 points
• ID selector (such as #main ) → Each ID scores 100 points
• Class, attribute and pseudo-class selectors (such as .class , [type="text"] , :hover ) → each scores 10 points
• Element selector and pseudo-element (such as div , ::before ) → each scores 1 point

for example:

 /* .nav #menu → 10 100 = 110 */
#menu .nav {
  color: green;
}

and:

 /* div .header :hover → 1 10 10 = 21 */
div.header:hover {
  background: yellow;
}

Note: Scores in different categories cannot be carried. For example, the total score (100) of ten class selectors is not as good as an ID (100) because they belong to different "digits".

FAQs and Suggestions

Avoid abuse !important

Although !important can force overwrite other styles, it is a "brutal means" to destroy cascade logic and will complicate debugging. Unless otherwise specified, try not to use it or use it less.

Understand inheritance and cascade order

Not all styles will be inherited, nor will the styles written in the following will take effect. Understanding the order of stacking of CSS (source, importance, specificity, order) can help you better control style behavior.

Use tools to assist with analysis

Modern browser developers can see what rules each element matches and their specificity. This is very helpful in troubleshooting style conflicts.

Let's summarize

Understanding CSS specificity is not difficult, the key is to remember that it is calculated based on selector type, not code order or stylesheet position. As long as you understand the weights of various selectors, you can write clearer and more controllable style rules.

Basically that's it.

The above is the detailed content of Understanding css specificity and how it is calculated. For more information, please follow other related articles on the PHP Chinese website!