CSS priorities: inheritance and cascade of CSS

DocumentCSS2.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:

1. Add, and to the style attribute of the element.
2. Select the identifier (# ID) for each id, and add 0, 1, 0, and 0.
3. Each class selector (. class), each attribute selector (for example, [attr = ""]), and each pseudo class (for example, hover), plus.
4. Add 0, 0, and 0 to each element or pseudo element (for example, firstchild.
5. Other delimiters (for example, global delimiters *, sub-delimiters>), and 0, 0, and 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:

6 .! Important declares more rules than anything else. If! If important declares a conflict, the priority is compared.
7. If the priorities are the same, follow the principle of "come later" in the source code.
8. The inherited style attributes do not participate in specificity calculation. They are lower than all other rules (for example, the Global selector *).

Sample Analysis:

Reference content is as follows: H1 {color: red ;} /* Only one common element is added. The result is 0, 0, 1 */ Body h1 {color: green ;} /* Add two common elements. The result is 0, 0, 0, 2 */ /* 0, 0, 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. The result is 0, 0, 1 */ /*, Is greater than, and 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 0, 1, 1 */ /*, Is smaller than, and the latter wins */

CSS priority is an important concept, especially when maintaining a large CSS style. Priority actually involves many inheritance issues.
This article outlines the knowledge of priority. In actual development, you need to pay attention to the summary and memory of experience. Only by understanding and image can we better absorb and apply it.