Perhaps you have also experienced this situation: you have clearly specified a CSS rule for a certain element, so why does it display in the browser so differently from what you expected? Have you ever carefully looked into the issue? Have you learned about the CSS style specificity algorithm? If not, then please take a look at my explanation of the CSS specificity algorithm below.

Before we begin:

Let's first take a look at what CSS selectors there are:
  • Universal selector: * { SRule } , such as:
* {
    font-size: 14px;
}
  • Type selector: element { sRule } , such as:
div {
	background: #000000;
}
  • Attribute selector: element[attr] { sRule } 、element[attr=value] { sRule }、element[attr~=value] { sRule }、element[attr|=value] { sRule }, such as:
h1[title] {
	font-size: 20px;
}

input[type='text'] {
	font-size: 14px;
}
  • Descendant selector: parent child { sRule }, such as:
div span {
	font-size: 14px;
}
  • Child selector: parent > child { sRule }, such as:
div>span {
	font-size: 14px;
}
  • ID selector: #id { sRule }, such as:
#name {
	font-size: 14px;
}
  • Class selector: .class { sRule }, such as:
.btn {
	background: #000000;
}
  • Pseudo-class: :link、:visible、:hover、:active、:focus、:first-child。
  • Pseudo-element::before、:after、:first-line、:first-letter

CSS Specificity

Now that we have gone through the various CSS selectors, let's take a look at what actually determines the final display effect of an element. In general, the browser decides which rules should ultimately be applied to each element based on the value of the element's CSS Specificity.
The Concept
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.—— Excerpted from MDN
CSS Specificity is one of the most difficult parts of CSS style cascading to understand. Generally speaking, the differing weights of selectors are the reason your CSS rules don't match your expectations. To fully understand how the browser applies rules to each element, you must deeply understand the concept of CSS Specificity and know how to calculate it. This is also what the title of this article refers to: understanding CSS's priority algorithm.

CSS Specificity Overview

  1. Specificity determines which CSS rules the browser should apply to an element.
  2. Specificity is usually the reason why your CSS rules are not applied to certain elements, even though you think they should be applied to those elements.
  3. Each selector has its own Specificity level weight.
  4. If two rules are applied to the same element, the rule with the higher Specificity weight wins.
  5. There are four fairly intuitive categories with different Specificity weights, namely: inline styles, ID selectors, class selectors and attribute selectors, and element selectors.
  6. If multiple selectors have the same Specificity value, the rule that appears last wins.
  7. If multiple selectors have different Specificity values, the more specific rule has the higher Specificity value.
  8. The last defined rule overrides earlier conflicting rules.
  9. Inline styles have a higher Specificity value than other rules.
  10. ID selectors have a higher Specificity value than attribute selectors.
  11. If you want to increase an element's Specificity value, you should try using an ID selector.
  12. A class selector has a higher Specificity value than any number of element selectors.
  13. You can use a CSS Specificity calculator to calculate the Specificity of CSS.

How to calculate CSS Specificity

  • Remember how to calculate CSS Specificity. Start from 0, add 1000 for inline styles, add 100 for each ID selector style, add 10 for each class selector style or attribute selector style or pseudo-class selector, and add 1 for each element selector or pseudo-element selector.For example:
    body #content .data img:hover {

}
    The CSS Specificity value of the above rule is 122(或者 0,1,2,2 或者 0122) . Calculation process:
    0 +
100 (#content ID 选择符) +
10 （.data 类选择符）+
10 （:hover 伪类选择符）
1 （body 元素选择符）+
1 （img 元素选择符） +
= 122
  • Other methods: Selector Specificity

Some exercises

No.RuleResult
2li { }1 (one element)
9style=””1000 (one inline styling)
14#sith100 (one id selector)
5ul ol+li { }3 (three elements)
11div p { }2 (two HTML selectors)
12.sith10 (one class selector)
4ul li { }2 (two elements)
6h1 + *[rel=up] { }11 (one attribute, one element)
3li:first-line { }2 (one element, one pseudo-element)
7ul ol li.red { }13 (one class, three elements)
15body #darkside .sith p { }112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
13div p.sith { }12 (two HTML selectors and a class selector)
8li.red.level { }21 (two classes, one element)
10p { }1 (one HTML selector)
The above content provides a general introduction to CSS Specificity and how it is calculated. Among these, there are a few things to note: the style rules defined usingthe universal selectorhave a CSS Specificity value of 0，0，0，0 , and the CSS Specificity value of style rulesinheritedis also 0，0，0，0. While using !important rules defined with have the highest CSS Specificity.
At this point, the question of how the browser renders an element's styles should no longer be a problem.
In summary,!important has the highest priority. Inline styles have higher priority than rules in external CSS files. Styles from ID selectors have higher priority than class selectors, attribute selectors, and pseudo-class selectors, while rules from class selectors, attribute selectors, and pseudo-class selectors have higher priority than rules from element selectors and pseudo-element selectors. Universal selector rules and inherited rules have the lowest priority. Rules that appear later override earlier conflicting rules. More specific rules have higher priority. You can determine which rules the browser should render by calculating the CSS Specificity value.

CSS Specificity Tools and Resources

References