Precedence of CSS Styles

CSS---------------------------Reference text--------------------------------------
The specificity of the style sheet describes the relative weights of the different rules, and its basic rule is:

Number of ID attributes in the statistics selector.
The number of class attributes in the statistics selector. China Tutorial Network-Personal space;
The HTML tag name format in the statistics selector.

Finally, write three numbers in the correct order, without spaces or commas, and get a three-digit number. (Note that you need to convert the number to a larger number that ends with three digits). A final list of numbers corresponding to the selector can easily determine that higher numeric attributes are above the lower digits.

The following is a list of the selectors sorted by attribute:

H1 {Color:blue} attribute value is: 1
P EM {color:purple;} attribute value is: 2
The. Apple {Red} attribute value is: 10
p.bright {Color:yellow} attribute value is: 11
P.bright Em.dark {Color:brown} attribute value is: 22
#id316 {Color:yellow} attribute value is: 100

From the table above we can see that #id316 has a higher specificity, so it has a higher weight. When more than one rule can be applied to the same element, the higher the weight of the style will be taken precedence.
-------------------------------------------------------------------------

may not be very good understanding, according to the weight of the above order, first statistical ID, then statistics class, and then statistics HTML tags. That

-------------------------------------------------------------------------
tH1 {Color:blue} attribute value is: 1
P EM {color:purple;} attribute value is: 1+1=2
The. Apple {Red} attribute value is: 10
p.bright {Color:yellow} attribute value is: 10+1=11
P.bright Em.dark {Color:brown} attribute value is: 10+10+1+1=22
#id316 {Color:yellow} attribute value is: 100
-------------------------------------------------------------------------

You can see that the weight of HTML tags is 1,class weight is the weight of 10,id is 100. The inheritance weight of 0 is also mentioned in the article.

The article mentions a little trick:

---------------------------------Reference Text---------------------------------
If you want H1 to always be black, and EM text is red in other cases, the following style sheet settings are a good way to do this:

H1,h1 EM {Color:black} attribute value is: 1,2
The EM {color:red;} attribute value is: 1

Given this rule, any em text except within the H1 element is red, and the EM text inside the H1 is still black, because of its selector grouping, there are two valid rules in the first rule (one for H1, the other for H1 em) and there are two attribute values-one for each rule.
-------------------------------------------------------------------------

This technique is very interesting, HTML is like this:

-------------------------------HTML--------------------------------------
<H1> Black h1<em> Black em</em><EM> Red em</em>
-------------------------------------------------------------------------

Perhaps you would say that it is related to the above CSS style order? Can try to change to:

---------------------------------changed style--------------------------------
The EM {color:red;} attribute value is: 1
H1,h1 EM {Color:black} attribute value is: 1,2
-------------------------------------------------------------------------

The effect is still the same. This also explains why the "include selector (E1 E2)" Priority is higher than the type selector (E).

This is helpful when writing styles, such as we can use when defining a list:

-------------------------------------------------------------------------
ul{color:red;}
UL Li{6jguestul Li{color:green;}
Div Ul{color:orange;}
Div ul Li{color:blue;}
-------------------------------------------------------------------------

This allows you to define the label separately without adding attributes such as "Id=xx", "class=xxx", and so on.