About CSS precedence, CSS precedence calculation

Principle one: Inheritance is inferior to the specified
Principle two: #id >. class > Tag Selector
Principle three: The more specific the more powerful
Principle four: Label #id > #id; tags. class >. class

The calculation method of CSS Priority weight

CSS precedence consists of four levels (in-tag selectors, ID selectors, class selectors, element selectors), and the number of occurrences of each level!

The precedence of a CSS is calculated based on the number of occurrences of these four levels.

The rules for calculating CSS precedence are as follows:
* Styles defined in element tags (style property), plus 1,0,0,0
* each ID selector (e.g. #id), plus 0,1,0,0
* Each class selector (such as. Class), each property selector (such as [attribute=]), each pseudo-class (such as: hover) plus 0,0,1,0
* Each element selector (such as p) or pseudo-element selector (e.g. FirstChild), plus 0,0,0,1
Then, adding the four numbers separately, you get the value of the precedence for each CSS definition,
Then, from left to right, the size of the large CSS style is higher.

Example:
The CSS file or <style> is defined as follows:
1. h1 {color:red;}
/* An element selector, the result is 0,0,0,1 */
2. Body h1 {Color:green;}
/* Two element selector, the result is 0,0,0,2 */
3. H2.grape {color:purple;}
/* An element selector, a class selector, and the result is 0,0,1,1*/
4. li#answer {color:navy;}
/* An element selector, an ID selector, and the result is 0,1,0,1 */
The element's style property is defined as follows:
h1 {Color:blue;}
/* element tag defined, an element selector, the result is 1,0,0,1*/

So, the color of the H1 element is blue.
Attention:
1.!important declares the highest style precedence if the conflict is recalculated.
2. If the priority level is the same, select the last style that appears.
3. The inherited style has the lowest priority.

About CSS precedence, CSS precedence calculation