[Programmers must] Precedence of CSS Styles

For professional players, please visit: http://www.w3.org/TR/CSS2/cascade.html

When using CSS to control page styles, it is often the case that a set style is "overwritten" and not valid.

How do browsers prioritize CSS styles based on their priorities?

Summarized as follows:

The source of the style

There are many sources of styles, which are set by the author of the web Developer, have the default browser, and the user of the Web page. The various style declarations overlay each layer, or inherit, or overwrite, or overlay the calculations, affecting the appearance of the elements.

The origins of the styles are:

1, browser default style;

2, user style;

3, author link style;

4, the author page embedded style (this should be used sparingly);

5, the author in line style (this is not a good habit, to quit).

In order of origin, priority is getting higher.

The particularity of selectors

CSS provides a variety of selectors that can be selected by tag, CSS class, or ID.

The elements are selected in different ways, with different precedence levels.

The particularity is calculated according to four dimensions, set to A, B, C, D, from a to D one by one, the priority of the front dimension wins, the back does not compare.

Four dimensions refer to:

a--in-line style;

b--is specified by ID;

c--specified by class or attribute;

d--is specified by a label or pseudo-class.

The comparison method is just a few numbers.

Examples are as follows (official example):

*             {}/  * a=0 b=0 c=0 d=0, specificity = 0,0,0,0 */li            {}/  * a=0 b=0 c=0 d=1, specificity = 0,0,0, 1 */Li:first-line {}/  * a=0 b=0 c=0 d=2-specificity = 0,0,0,2/ul li         {}/* a=0 b=0 c=0 d=2-  Spec  ificity = 0,0,0,2 */ul ol+li      {}/  * a=0 b=0 c=0 d=3-specificity = 0,0,0,3 */h1 + *[rel=up]{}//  a=0 b=0 C=1 d=1-specificity = 0,0,1,1 * * ul ol li.red {}/* a=0 b=0 c=1 d=3-  specificity = 0,0,1,3 */li.red . Level  {}/  * a=0 b=0 c=2 d=1-specificity = 0,0,2,1 */#x34y         {}/  * a=0 b=1 c=0 d=0-specific ity = 0,1,0,0 */style= ""/          * a=1 b=0 c=0 d=0-specificity = 1,0,0,0 * *

in the example, the particularity increases from top to bottom.

If these selectors all refer to the same element, set the same attribute, and choose a style with a large size to take effect.

If the unfortunate draw, after the declaration of effect.

Priority principle

The principle of precedence, the cascading principle, is the core mechanism of cascading style sheets and the origin of CSS names.

The priority principle consists of three articles:

1, first look at the particularity;

2, again see the source of rules;

3, directly set greater than the inheritance (the specificity is higher, if only the parent element, or ancestor element, that directly to the current element of the setting takes effect).

Finally, never use "!important;".