The article is some old, but very valuable reference. Editor's note.
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
blah
, while the external definition refers to the rules defined by or
