HTML Advanced Tips: 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;}
/*There is only one common element addition, and the result is 0,0,0,1*/
body h1 {color: green;}
/*The addition of two common elements results in 0,0,0,2*/
--The latter won
h2.grape {color: purple;}
/*A common element, a class selection sign, the result is 0,0,1,1*/
h2 {color: silver;}
/*A common element, resulting in 0,0,0,1*/
--The former wins
html > body table tr[id="totals"] td ul > li {color: maroon;}
/*Seven common elements, one attribute selector, two other selectors, resulting in 0,0,1,7*/
li#answer {color: navy;}
/*An ID selector, a normal selector, the result is 0,1,0,1*/
--The latter won

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.

Therefore, although the priority problem looks simple, but behind it there are quite complex mechanism, need to pay more attention.