CSS priority: old9's viewpoint on resolving priority conflicts

Priority is actually a problem solved by a conflict. When the same element (or content) is selected by the CSS selector, different CSS rules should be selected based on priority, this involves a lot of problems.
The first is the specificity (particularity) of CSS rules. CSS2.1 has a set of computing methods for specificity, represented by a four-digit numeric string (CSS2 is a three-digit, the higher the specificity, the more special the rule will be. The following general rules apply to the calculation of specificity in various situations:
◎ Each ID selection operator (# someid), plus 0, 1, 0.
◎ Each class selector (. someclass), each attribute selector (such as [attr = ""]), and each pseudo class (such as hover) plus 0, 0, 1, 0
◎ Add 0, 0, 0, and 1 to each element or pseudo element (: firstchild).
◎ Other delimiters include the global delimiters *, which are 0, 0, and 0. This is equivalent to not being added, but it is also a specificity, which will be explained later.
According to these rules, the number strings are added by bit to obtain the final specificity calculated. Then, the comparison results are compared by bit in the order from left to right.
For example:
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 */
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 */
The former Wins
    
Html> body table tr [id = "totals"] td ul> li {color: maroon ;}
/* Seven common elements, one attribute selector, and two other delimiters. The result is */
Li # answer {color: navy ;}
/* An ID selector and a common selector. The result is 0, 1, 1 */
The latter wins
In addition to specificity, there are other rules
◎ The style priority in the text is 1, 0, 0, so it is always higher than the external definition. Here, the style finger is shown in <div style = "color: red"> blah </div>, external definitions refer to rules defined by <link> or <style> labels.
◎ Yes! Important declares more rules than anything else.
◎ If! If important declares a conflict, the priority is compared.