CSS Priority judgment

Concept

The browser determines which attribute values are most relevant to the element and is applied to the element by judging the precedence . The priority is determined by a matching rule consisting of selectors.

How to calculate?

The priority is calculated from the cascading string consisting of each selector type. It is not a weight value corresponding to the corresponding matching expression.

If the precedence is the same, the element will eventually apply the later declarations in the CSS.

Note: The distance in the document tree is not affected by the element priority calculation. (You can see an example of ignoring the distance in the DOM tree in the document)

Priority order

The following is a list of selectors that are progressively increased in priority:

• Universal Selector*
• Element (type) Selector
• Class Selector
• Property Selector
• Pseudo class
• ID Selector
• inline style

In fact, elements can 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:

 1  <  div  id  = ' Test '  >  2  <  a  href  = "#"   text</ a  >  3  </ div  >  

1 * {2    color:red; 3 }45#test {6    7 }

The color of the final text is red.

!importantRule is the exception

When !important a rule is applied to a style declaration, the style declaration overrides any other declaration in the CSS, regardless of where it is located in the Declaration list. Nonetheless, the !important rule is !important not a good habit to use with priority, It is difficult to debug because it changes the cascading rules of your style sheet.

Some unwritten rules

• do not use it in a full-site-wide CSS !important .

• Use only on specified pages when you need to overwrite a full-site CSS or an external CSS (such as a referenced ExtJS or Yui)  !important .

• do not use it in your plugin !important .

• always prioritize the use of style rules to solve problems instead !important .

Instead, you can:

Better use of CSS cascading properties

More use of the appropriate selector. For example, by adding more elements to the selected object element before you need to select it, your selector becomes more targeted, increasing the priority by reducing the range of choices:

1 <DivID= "Test">2   <span>Text</span>3 </Div>4 5 div#test span {color:green}6 span {color:red}7Div span {Color:blue}

Whatever the order of your C?SS statements, the text will be green because this rule is the most specific and highest priority. (In the same vein, the blue rule overrides the red rule regardless of the order of the statements)

when should I use:

A) a situation

There's a CSS file on your website that's set up a full-site style, and you (or your coworkers) write some effects that are usually poor inline styles (the highest priority is in-line style).

In this case, you can write some styles in your global CSS file !important to overwrite the inline styles that are written directly on the element.

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

B) Another situation

1 #someElement p {2    color:blue; 3 }45p.awesome {6    color:red; 7 }

#someElement 的情况下，How can you make the paragraph red in the outer layer awesome ? In this case, if you do not use !important，第一条规则永远比第二条的优先级更高。 the

How to cover off!important

Very simply, you only need to add one more !important CSS statement, apply it to the higher priority selector (add additional label, class or ID selector on the original basis), or keep the selector, but add the location that needs to be behind the original declaration (the same priority level, The definition above will overwrite the preceding definition).

1 < Div > 2   <  href= "#"  ID= "Test">text</A  >3</div>

To turn the original green text into red, promote the priority way:

1 #test. a{2   color:red!important;  <!-- Although this statement is in front, it will still overwrite the style below-- 3}4a{5    color:green!important; 6 }

But

1 a{2  color:green!important; 3 }4a{5   color:red!important;  <!-- the same selector, and the statement behind it overrides the front- -6 }

Originally from: http://segmentfault.com/a/1190000000453851

CSS Priority judgment