How browsers determine CSS precedence

Concept

The browser determines which attribute values are most relevant to the element by judging the priority, and applies to the element. The priority is determined by the matching rule that the selector consists of.

How to calculate?
Precedence is based on a cascade string of characters that are composed of each selector type. It is not a weighted value corresponding to the corresponding matching expression.

If the priority level is the same, the element will eventually apply the back declaration in the CSS.

Note: The distance in the document tree does not affect the calculation of the element's precedence. (See the document for examples that ignore the distance in the DOM tree)

Order of Precedence
The following is an incremental list of selectors:

Universal Selector *
Element (type) Selector
Class Selector
Property Selector
Pseudo class
ID Selector
inline style
In fact, elements can also inherit some styles, such as color, from the parent element. The precedence of these inherited styles is always lower than the style of the element itself, including the Universal selector:

The

code is as follows:


<div id= ' Test ' >


<a href= "#" >text</a>


</div></p> <p> * {


color:red;


}





#test {


Color:blue;


}

The color of the final text is red.

!important rule is the exception
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.!important is not a good habit because it changes the cascading rules of your stylesheet, making it difficult to debug.

Some unwritten rules.

Do not use!important in a full station-wide CSS.

Use!important on a specified page only when you need to cover a full station-wide CSS or external CSS (such as a quoted ExtJS or Yui).

Do not use!important in your plugin.

Always prioritize using style rules to solve problems rather than!important.

Instead, you can:

Better use of cascading properties of CSS

Use the appropriate selector more. For example, when you need to add more elements to the selected object element to make the selection narrower, your selector becomes more targeted, increasing the priority:

The

code is as follows:


<div id= "Test" >


<span>Text</span>


</div>





div#test span {color:green}


span {color:red}


div span {color:blue}

Regardless of the order of your C SS statement, the text will be green because this rule is the most specific and the highest priority. (Similarly, blue rules override red rules regardless of the order of statements)

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.

A living example: Someone wrote a bad inline style in the jquery plugin.

B) a different situation

The code is as follows:


#someElement p {


Color:blue;


}





P.awesome {


color:red;


}

How can you make awesome paragraphs red when the outer layer is #someElement? 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.

The

code is as follows:


<div>


<a href= "#" id= "test" >text</a>


</div>

To change the original green text to red, the way to increase the priority:

The

code is as follows:


#test. a{


color:red!important;<!--Although the declaration is in front of it, it will still overwrite the bottom style-->


}


a{


Color:green!important;


}

But

The

code is as follows:


a{


Color:green!important;


}


a{


color:red!important;<!--the same selector, the statement behind will cover the front-->


}