Detailed CSS Priority

The priority problem is actually a problem of conflict resolution, when the same element (or content) is selected by the CSS selector, it is necessary to choose different CSS rules according to priority, which involves a lot of problems.

The first is the CSS rules of specificity (specificity), CSS2.1 a set of specificity calculation, with a four-digit string (CSS2 is three-bit) to indicate that the final specificity higher rules more special, The more advantageous it is when deciding on a priority level. The figures for the specific calculations of specificity in various cases are added to the following general rules:

Each ID selector (#someid), plus 0,1,0,0.

Each class selector (. SomeClass), each property selector (shaped like [attr= "], and so on), each pseudo class (like: hover) plus 0,0,1,0

Each element or pseudo element (: firstchild), plus 0,0,0,1

Other selectors include the global selector *, plus 0,0,0,0. The equivalent of no, but this is also a kind of specificity, later will explain.

By following these rules, the number strings are added sequentially, resulting in the specificity of the final calculation, and then a bitwise comparison of the left to right order when comparing the trade-offs.

Let's give some examples:

h1 {color:red;}
/* Only one common element addition, the result is 0,0,0,1 * *
Body h1 {Color:green;}
* * Two common element addition, the result is 0,0,0,2 * *
--the latter wins
H2.grape {color:purple;}
/* A common element, a class selector Plus, the result is 0,0,1,1*/
h2 {Color:silver;}
/* A common element, the result is 0,0,0,1 * *
--The former wins
HTML > Body table tr[id= "totals"] td ul > li {color:maroon;}
/* 7 ordinary elements, one property selector, two other selectors, the result is 0,0,1,7 * *
li#answer {color:navy;}
/* An ID selector, a normal selector, the result is 0,1,0,1 * *
--the latter wins

There are some other rules besides specificity.

The style priority within the text is 1,0,0,0, so it is always higher than the external definition. In this case the style refers to the style as <div style= "color:red" >blah</div>, while the external definition refers to the rules defined by <link> or <style> tags.

There are rules of!important declarations above all.

If the!important declares a conflict, the precedence is compared.

If priority is the same, it is determined in the order in which they appear in the source code, later on.

The style obtained by inheritance has no specificity calculation, and it is lower than all other rules (such as the rules defined by the global selector *).

With regard to external styles that are loaded via @import, because @import must appear before all other rule definitions (if not, browsers should ignore them), the general precedence conflict is downwind in accordance with the catch-up principle.

Here it is necessary to mention that Ie,ie is a @import that can identify location errors, but wherever @import is considered to be located before all other rule definitions, this may cause some misunderstanding.

So the priority problem seems simple, but there is a complex mechanism behind it, need to pay more attention to