In-depth analysis of CSS inheritance (3)

CSS inheritance exists in the application, so some readers may be confused about it. What happens when multiple style sheets are applied to one element object at the same time? For a simple example, run the following code:
CSS webpage layout-
[You can modify some code before running it to view the effect]
We will see the running effect: Because the selector h1 and. aaa match the above h1 element, which one will the browser apply? Through observation in the browser, we found that the text was applied with the. aaa style, so it is displayed in red. This is because the two rules have different characteristics and CSS rules must be processed in this way. The font size is the default h1 size.
The particularity in the style sheet describes the relative weights of different rules. Its basic rules are:
Counts the number of ID attributes in the selector.
Count the number of CLASS attributes in the selector.
The HTML tag name format in the statistics selector.
Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number. (Note: You need to convert a number into a larger number ending with three digits ). The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number.
The following is a list of feature-specific delimiters:

The code is as follows:	Copy code
H1 {color: blue;} feature value: 1 P em {color: purple;} feature value: 2 . Apple {red;} feature value: 10 P. bright {color: yellow;} feature value: 11 P. bright EM. dark {color: brown;} feature value: 22 # Id316 {color: yellow} feature value: 100

From the above table, we can see that # id316 has a higher particularity, so it has a higher weight. When multiple rules can be applied to the same element, the style with a higher weight will be preferentially used.