CSS priority and execution sequence

The execution sequence and priority of the css tutorial are actually a conflict resolution problem. When the same element (or content) is selected by the css selector, different css rules should be selected based on the 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:
Select the identifier (# someid) for each id, and add 0, 1, 0, and 0.
Each class identifier (. someclass), each attribute identifier (such as [attr = ""]), and each pseudo class (such as hover) plus
For each element or pseudo element (: firstchild), add
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 is, 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.
If the priority is the same, it is determined by the order in which the source code appears.
The inherited style does not calculate specificity. It is lower than all other rules (such as rules defined by the global selector ).
For external styles loaded by @ import, because @ import must appear before all other rule definitions (if not, the browser should ignore it), follow the principle of "post-import, generally, priority conflicts take a disadvantage.
Here we need to mention that ie can identify @ import with incorrect location. However, no matter where @ import is located, it is considered to be located before all other rule definitions, this may cause some misunderstandings.