CSS CSS selector precedence and!important properties

The CSS selector is powerful, and when different selector styles are set to conflict, the style is set with a high weight selector. Weight (ie, priority) rules like this, the higher the weight, the higher the priority:

The same element can use more than one rule to specify its same style (such as font color), and each rule has its own selector. Obviously there is only one rule that works (it is not possible to have a word that is both red and green), then the rule is of the highest specificity, which is the CSS priority. Many people simply know the selector priority: theid>class> element selector , without knowing why the priority of the ID is greater than the class priority. So how does the CSS priority actually calculate?

The special value of the selector is expressed in 4 parts and is represented by 0,0,0,0: The style of the lines, plus the 1,0,0,0.  The specific value of the ID selector, plus 0,1,0,0.  Class Selector, property selector, or pseudo class, plus 0,0,1,0.  Elements and pseudo elements, plus 0,0,0,1.  The wildcard selector * does not contribute to the particularity, i.e. 0,0,0,0. Finally, a special symbol !important(weight), it has no special value, but its priority is the highest , in order to facilitate the memory, it can be considered that its particularity value is 1,0,0,0,0.

Selector Specific values are ordered from left to right , and the specificity value 1,0,0,0 is greater than all the special values beginning with 0, even though it is 0,99,99,99, the priority is still lower than the 1,0,0,0.

A lot of people know that a label has four states: Link access before, link access, mouse over, activate, corresponding to four kinds of pseudo class: link,: visited,: hover, active, and these four pseudo classes if the same element set the same attribute, then they have a certain order of declaration , we generally follow the "love and Hate Principle Lvha" (Loves hate), why is this order. Can't it be in any other order?

According to the rules of CSS precedence, the particularity value of pseudo class is the same as the particularity value of 0,0,1,0,4, then the rule of the later Declaration has higher precedence. When the mouse is over a link, meet: Link and: Hover two pseudo class, to change the color of a label, you must be: hover pseudo class in: Link pseudo class declaration after, similarly, when the mouse click to activate a link, while satisfying: link,: hover,: Active three states, To display the style (: Active) when a label is active, you must place the: active declaration after: link and: hover. So we get LVHA this order. This order can be changed. OK, but only: link and: Visited can swap locations, because a link is either accessed or not accessed, cannot be satisfied at the same time, and there is no coverage problem.

Previously mentioned!important properties,!important is used to make IE6 and IE7, IE8, Firefox (Firefox), Google and other browsers to do compatible, but IE6 can not execute!important. When the!important rule is applied to a style declaration, the style declaration overwrites any other declaration in the CSS, regardless of where it is in the declaration list. Still,!important rules have nothing to do with precedence. Using!important is not a good habit because it changes the cascading rules of your stylesheet, making it difficult to debug.

Note When using!important: Never never use!important on a full station-wide CSS only use!important in specific pages that need to cover a whole station or an external CSS (such as a quoted ExtJs or Yui) Never Never use!important in your plugin Always to optimize the priority of using style rules to solve problems instead of!important

when should you use:

a) a situation

There is a CSS file on your site that has a whole-station style set, and you (or your co-workers) have written some of the most effective inline styles (in-row styles have the highest precedence). In this case, you can write some!important styles in your global CSS file to cover the inline styles that are written directly on the element.

B) A different situation

#someElement p {
    color:blue;
}

p.awesome {
    color:red;
}

How can you make awesome passages red when there is #someElement in the outer layer? In this case, if you do not use!important, the first rule is always higher than the second.

how to cover off!important:

Very simply, you just need to add a!important CSS statement, apply it to a higher priority selector (add an additional label, class, or ID selector on the original basis), or keep the selector the same, but add a location that needs to be followed by the original declaration (with the same precedence) The definition below overrides the definition in front of it.

#test. a{
  color:red!important;     <!--Although this declaration is in front, it will still overwrite the bottom style-->
}
a{
  color:green!important;
}

Or:

a{
  color:green!important;
}
a{
  color:red!important;     <!--the same selector, the declaration behind will overwrite the front-->
}

Author: Zhi Zhi

Sign: Road Long its repair far XI, I will go up and down and search.