CSS style Precedence calculation method

First, what is the CSS priority?

CSS precedence refers to the order in which CSS styles are parsed in the browser. When the same element (or content) is selected by multiple CSS selectors, the different CSS rules should be chosen according to precedence.

Second, why should we study CSS priority? What does CSS priority have to do with the portal system?

The main purpose of studying CSS precedence is to solve the conflict problem when multiple CSS selectors select the same element. In the portal system, in order to ensure that all the pages can be normal display, almost all the micro-pieces and pages have the basic CSS style, but the portal system is an open, personalized platform, most of the style gives users the right to modify, when the custom style and portal basic style is likely to create conflicts, Proper use of CSS precedence can be a perfect solution to these conflicts.

Third, CSS priority 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.

Such a description may be too complex, as in the following example, when two selectors select the same element, the precedence rule is as follows:

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

From here we can sum up a whole rule that is id>class> ordinary elements, the higher the priority of the hierarchy under the same type of selector.

There are some other rules besides the specificity.

The style priority within the text is 1,0,0,0, so it is always higher than the external definition. Here the style in the text

Blah

, while an external definition refers to the