1. CSS priority

1. CSS priorities

The browser decides which style to apply to the element based on priority, which is determined only by the selector’s matching rules.

In the following list, the selector type has decreasing precedence.

  • Inline styles (for example, style=”…” )
  • ID selector (for example, #example)
  • Class selectors (e.g..example), attribute selectors (e.g. [type=”radio”]), pseudo-classes (e.g. :hover)
  • Type selectors (for example, h1), pseudo-elements (for example, ::before)
  • Inherited style

2. Compute the CSS priority

To facilitate numerical prioritization, we set the weight of the inline style to 1000, the weight of the ID selector to 100, the weight of the class selector to 10, and the weight of the element selector to 1.

Comparing the priority of CSS is to calculate the weight: number of id selectors *100 + number of class selectors *10 + Number of element selectors *1 The greater the weight, the higher the priority.

Note: 1. Inline styles added to elements (for example, style=”font-weight:bold”) always override any styles from the external stylesheet and are therefore considered to have the highest priority. 2. If the weights are equal, the last style will override the first. Inherited styles have less precedence than directly specified styles. 4. The above numerical weight values are only fitted by us, and do not mean that multiple lower-level selectors can exceed one higher-level selector. No number of lower-level selectors can exceed the priority of a higher-level selector. 5. Class selectors, attribute selectors, and pseudo-class selectors have the same priority.

Priority based on type

The priority is calculated based on the type of selector.

For example: the attribute selector selects an ID but still evaluates by type in the priority calculation. It is at the attribute selector level, so the ID selector has higher priority even if the same element is selected, so the style set to #idtest takes effect.

#idtest{
  color:red;
}
[id ="idtest"]{
  color:blue;
}

<div id="idtest"What color will the text be? </div>Copy the code

4. The not pseudo-class does not participate in the priority calculation

[:not] Negation pseudo-classes ignore :not in the priority calculation, and calculate the priority according to the selector in :not. Other pseudo-classes (such as hover) participate in the CSS priority calculation, but [:not] does not.

div:not(#idtest){
  color:red;
}
div.classtest{
  color:blue;
}
<div class="classtest"What color will the text be? </div>Copy the code

Pseudo-class selectors and class selectors are supposed to have the same priority. Subsequent class selectors override previous pseudo-class selectors. However, the :not pseudo-class does not participate in the calculation, the :not internal selector participates in the calculation, the: NOT internal selector is the ID selector, the priority is higher than the class selection, so the final display is red.

5. Priority calculation ignores the distance in the DOM tree

body h3{color:blue; } html h3{color:red; } < HTML > <body> <h3> what color will the text be? </h3> </body> </html>Copy the code

The body tag is closer to the H3 tag, but the priority calculation ignores the distance in the DOM tree. The priority of body H3 is the same as that of HTML H3, whose style overrides the style of body H3.

Second, the! important

1,! Important to introduce

When using a! The important rule overrides any other declarations.

Use! Important is a bad habit and should be avoided because it breaks the inherent cascading rules in stylesheets and makes debugging to find bugs more difficult. When two conflicting bands! When the declaration of the important rule is applied to the same element, the declaration with a higher priority will be adopted.

Note:

  • Be sure to prioritize using style rules to solve problems instead! Important.
  • Use only on specific pages where you need to overwrite site-wide or external CSS (such as referenced ExtJs or YUI)! Important.
  • Never use it on site-wide CSS! Important.
  • Never use it in your plugin! Important.

Recommendation:

  • Make better use of CSS cascading properties.
  • Use more specific rules. Add one or more other elements before the one you select to make the selector more specific and get a higher priority.

2, under what circumstances can be used! important

1) You have a site-wide CSS file on your site or you (or a colleague) have written some bad inline styles.

In this case, you can write some in your global CSS file! Important to override inline styles written directly to elements.

2) The following situation

#someElement p { color: blue; } 
p.awesome { color: red; }
Copy the code

How can you make the awesome paragraph red with #someElement around it? In this case, if not used! Important, rule 1 always takes precedence over rule 2.

3, how to cover! important

1) Just add one more strip! Important CSS rule, then give this selector a higher priority (add a label, ID or class); Or if the selector has the same priority, place its position after the original declaration (equal priority, the latter will override the previous). 2), or simply rewrite the original rules to avoid using! Important.