CSS priority is very important, because priority may cause some statements to have no effect, so be sure to understand CSS priority.
The principle of first priority.
(1) Inheritance is not as good as specifying
(1) #id > .class > tag selector
(1) The more specific, the more powerful
(1) Tag #id > #id ; tag .class > .class
CSS priority includes four levels (in-tag selector, ID selector, class selector, element selector) and the number of occurrences of each level .
The CSS priority is calculated based on the number of occurrences of these four levels .
The rules for calculating CSS priority are as follows:
(1) The style ( Style attribute) defined in the element tag , plus 1,0,0,0
(2) For each ID selector ( such as #id), add 0,1,0,0
(3 ) Add 0,0,1,0 to each Class selector ( such as .class) , each attribute selector ( such as [attribute=]) , and each pseudo-class ( such as : hover)
(4) For each element selector (such as p ) or pseudo-element selector ( such as : firstchild) , etc., add 0,0,0,1
Add up these four numbers to get the priority value of each CSS definition, and then compare the size bit by bit from left to right, and the CSS style with a larger number has a higher priority.
example
1. h1 {color: red;}
/* An element selector, the result is 0,0,0,1
2. body h1 {color: green;}
/* Two element selectors, the result is 0,0,0,2
3. h2.grape {color: purple;}
/* An element selector, a Class selector, the result is 0,0,1,1
4. li#answer {color: navy;}
/* An element selector, an ID selector, the result is 0,1,0,1
The element's style attribute defines h1 {color: blue;} as follows
/* Defined in the element tag, an element selector, the result is 1,0,0,1
h1 {color: blue;}
/* Defined in the element tag, an element selector, the result is 1,0,0,1