Priority matching of CSS rules_html/css_WEB-ITnose

CSS rules can override each other, which we should be accustomed to. However, it is precisely because rules can override each other and child elements inherit the default behavior of parent elements that causes CSS conflicts. When encountering CSS conflicts, we usually add some more detailed rules to clarify how to display them to resolve the conflict. Usually the more detailed the rules, the higher the priority, but how is the priority defined?

First, distinguish according to the CSS definition position. The priority from low to high is as follows:

Browser Default Style (Browser Default Style)

External style sheet

Internal style sheet

Inline style (e.g., style="font-weight:bold")

The rules for defining positions are also determined based on the number of selectors of different types. The priority of selectors from low to high is as follows:

F: Universal selectors (e.g., *)

E: Type selectors (e.g., h1)

D: Class selectors (e.g., .example)

C: Attributes selectors (e.g., [type="radio"])

B: Pseudo-classes (e.g., :hover)

A: ID selectors (e.g., #example)

That is, ID > Pseudo class > Attribute > Class > Element > Wildcard, first we count the number of IDs in the rule, the number of IDs The more rules, the higher the priority. If they are the same, count the pseudo-classes again, and so on.

Here is an example:

article p span{  color: blue;}#red{  color: red;}

Priority of article p span: "A=0, B=0, C=0, D=0, E =3, F=0 (000030)"

#red's priority: "A=1, B=0, C=0, D=0, E=0, F=0 (100000)" (Higher!)

Another example:

#wrapper header div nav #gnavi{  list-style-type: none;}#top #hright #gnavi{  list-style-type: square;}

#wrapper header div nav #gnavi's priority: "A=2, B=0, C =0, D=0, E=3, F=0 (200030)"

#top #hright #gnavi's priority: "A=3, B=0, C=0, D=0 , E=0, F=0 (300000)" (higher!)

In addition, the highest priority is the !import attribute. If !important is added, then continue to count the attributes and elements in the rules. number.

If you can avoid !important, don’t write it like this. This style is too difficult to extend.

Reference link:

http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

http://www.hongkiat.com/blog/ css-priority-level/

Unless otherwise noted, this blog article is original. Please indicate the article address in the form of a link when reprinting: http://harttle.com/2015/07/16/css -priority.html