1. The priority of the CSS selector

! important > inline > id > class > tag > * > inherit > defaultCopy the code

2. Know the weights of the CSS selectors

1.! 3. Id selector: weight value 100 4. Class, pseudo-class, and attribute selectors, such as. Content: weight value 10 5. Type and pseudo-element selectors: weight value 1 6. Wildcard, child, and adjacent selectors: weight value 0Copy the code

3. Calculate the priority of the CSS selector based on the weight value

Such as:Copy the code
1: #box p{weight = 100+1} div p{weight = 1+1}Copy the code
#box p{... }.Copy the code
2: #box. Text {weight: 100+10} #box p{weight: 100+1}Copy the code
So the page displays # box.text {... }.Copy the code

4. Final conclusion

Add styles to tags according to CSS priority rules:! Important > header styles > > id selector class selector | | attribute selectors > tag selector > wildcard selector. We're calculating the weights.Copy the code