CSS style overlay (cascade) handle conflicts

Even in a less complex style sheet, there may be two or more rules that find the same element. CSS handles this conflict through a process called cascade (CASCADE). Cascade assigns an important degree index to each rule. The style defined by the author has the highest importance index, followed by the user-defined style. But to enhance the user's control, the user can increase its importance index by adding a!important to any rule, giving it precedence over any rule, even higher than the author's!important.

Therefore, the order of cascading importance indices is:

User style marked as!important

Author style marked as!important

Author style

User Style

Default style for browser/user agent

To calculate the precedence of a rule, each type of selector has a corresponding numeric value, because each selector consists of several selectors, so the selector's precedence exponent is added by the number corresponding to the selector, and the higher the number, the higher the priority. There are four categories of selectors in CSS:

Inline style (Inline style), such as ...

ID selector (ID selectors), such as #myid

Class, property selector, Pseudo class (Classes, Attributes and pseudo-classes), such as. class {...}, [href$=dudo.org],: hover

Element (elements), pseudo element selector (pseudo-elements), such as P {...},: First-line {...}

How do you measure it? As mentioned earlier, each of these classes has a different numeric representation, including:

Inline style is: 1000

ID Selector is: 0100

The class selector is: 0010

The element style is: 0001

The point here is that all of these values are not 10 digits, 1000 are code, it's an inline style,

For example, the body #wrap p {...}, then its priority index is 1+100+1=102, and the body Div#wrap p {...} The priority index is 1+ 1 +100 + 1 = 103.

Take another look at the other examples:

* {} 0

Li:first-line {} 2 (one element, one pseudo-element)

UL Ol+li {} 3 (three elements)

UL ol li.red {} (one class, three elements)

Style= "" 1000 (one inline styling)

div p {} 2 (two HTML selectors)

Div P.sith {} (two HTML selectors and a class selector)

Body #darkside. Sith p {} 112 (HTML selector, ID selector, class selector, HTML selector; 1+100+10+1)

Look at this code:

#wrap #content {color:blue;}

#content {color:red;}

This is a text here

What color will the final text show?

Yes, style overrides only occur with the same priority. This example #wrap #content为200, and #content is 100, even after setting color:red, will not cover the previous set of Color:blue;. In addition, you can #content {color:red;} Increase!important to see the effect.

All of the above are in the case of fewer than 10 selectors, you can use and compare these values as decimal, but what happens when the selector is more than 10 (though the odds are small)? We refer to a Eric example:

. Hello {color:red}/* specificity = 10 * *

HTML body DIV UL Li Ol li ul Li Ol li ul Li ol li {color:green;}

/* specificity = 15 * *

The 10 is not "Ten", it is only a nuisance selector, so it's priority is still higher than the selector of 15 type selectors. If it's hexadecimal, it's like this.

. Hello {color:red}/* specificity = 10 * *

HTML body DIV UL Li Ol li ul Li Ol li ul Li ol li {color:green;}

/* specificity = 15 * *

But the problem, if you add two more elements, and then become 11 again, or appear in front of the situation. But you should always remember that even though the values "look" larger, their sort is first determined by type priority.

Note : More wonderful articles please pay attention to the triple web Design tutorial section.