CSS style priority

1. First check whether the selector works on the target tag. In the case of non-target elements, the one closer to the target takes precedence

Ex. :

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </style> </head> <body> <! - select the target element, the nearer the goal is preferred - > < div id = "box" > < p > < span > the pen < / span > < / p > < / div > < / body > < / HTML >Copy the code

2. All functions in the target label depending on the weight

Weight: one! Important +10000, one inline style +1000, one ID selector +100, one attribute selector, class or pseudo-class selector +10, one element selector or pseudo-element +1, inheritance, * (wildcard selector) +0.

Ps :(the final weight value is equivalent to each attribute)

3. Both are applied to the target tag and have the same weight depending on who is near

case

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </title> </ style> 200px; /* height: 200px; /* background-color: red; */ #box #box3 p{width: 200px; /* height: 200px; /* background-color: yellow; </style> </head> <body> <! <div id="box2" class="boxs2"> <div id="box3" class="boxs3"> <p></p> </div> </div> </div> </body> </html>Copy the code

Note: the inline style and the inline style have the same priority. If the above three items are the same, they will take effect according to the CSS rules

conclusion

  1. Common selector weight priority:! important > id > class > tag
  2. ! Important increases style priority, but is not recommended. If! Important is used for a shorthand style attribute, and any subattributes represented by the shorthand style attribute will be applied! Important. Such as:background: blue ! important;
  3. If both styles are used! Important, the value with a higher weight has a higher priority
  4. In a CSS style sheet, you write the same CSS style twice, and the later one overwrites the previous one
  5. Styles refer to the same element, weight rules apply, and weight is applied
  6. If the style refers to the same element, the weight rule takes effect. If the weight is the same, the proximity rule takes effect
  7. When styles do not refer to the same element, the weight rule fails, the proximity rule takes effect, and the style closest to the target element is applied

\