Details about the priority of CSS

I found many friends do not know much about the priority of CSS, And the rules are very simple. One thing to note: If your style management needs to deeply judge the priority of CSS, should you reflect on your CSS code? Is it reasonable? Optimized?

Css2.1 specifies the specificity (specificity) Calculation Method of CSS rules, which is represented by a four-digit numeric string (Note: three digits are used in css2, finally, the priority of CSS is determined based on specificity.

Specific specificity calculation rules:

• Add 1, 0, 0, 0 to the style attribute of the element.
• Select the identifier (# ID) for each ID, and add 0, 1, 0, and 0.
• Each Class Identifier (. Class), each attribute identifier (for example, [ATTR = ""]), and each pseudo class (for example, hover), plus 0, 0, and 1. 0.
• Add 0, 0, 0, and 1 to each element or pseudo element (for example, firstchild.
• Other delimiters (for example, global delimiters *, sub-delimiters>), plus 0, 0, 0.

Finally, the final specificity value is obtained through the phase-by-phase addition string, which is compared by bit from left to right.

In addition to specificity, there are other rules:

• ! Important declares more rules than anything else. If! If important declares a conflict, the priority is compared.
• If the priorities are the same, the "post-Come" Principle in the source code is used.
• The inherited style attributes do not participate in specificity calculation. They are less than all other rules (for example, global selector *).

Sample Analysis:

H1 {color: red;}/* only one common element is added. The result is 0, 0, 1 */body H1 {color: green, the result is 0, 0, * // * 0, 0, is less than 0, 0, the latter wins */h2.grape {color: Purple ;} /* a common element and a class operator addition result: 0, 0, 1, 1 */H2 {color: Silver;}/* a common element with a result of 0, 0, 0, 1 * // * 0, 0, 1, and greater than 0, 0, 1. The former wins */html> body table tr [ID = "totals"] TD ul> Li {color: maroon ;} /* seven common elements, one attribute selector, and two other selector (sub-Selector>). The result is 0, 0, */Li # answer {color: Navy ;} /* an ID selector and a common selector. The result is, * // *, is smaller than, and. The latter wins */

Excerpt from "CSS priority" of old9 (cannot cross GFW)