Shulou(Shulou.com)06/01 Report--

Editor to share with you what the css priority is, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

First of all, there is the specificity (particularity) of CSS rules. CSS2.1 has a set of calculation methods about specificity, which is expressed by a four-digit numeric string (CSS2 is three digits). In the end, the higher the specificity rule is, the more special it is, and the more advantageous it is in priority determination.

With regard to the specific calculation of specificity, the numerical addition in various cases has the following general rules:

Each ID selector (# someid), plus 0mem1j0p0pl 0

Each class selector (.someclass), each attribute selector (such as [attr= ""], etc.), each pseudo-class (such as: hover, etc.) plus 0memo 0meme 1mem0

Each element or pseudo element (: firstchild), etc., add 0j0j0j0pl 1

Other selectors include the global selector *, which adds zero to zero, but this is also a specificity, which will be explained later.

According to these rules, the numeric strings are added bit by bit, and the final calculated specificity is obtained, and then compared bit by bit from left to right when comparing and choosing.

Here are some examples:

H2 {color: red;}

/ / there is only one common element bonus, and the result is 0pd0j0re0pl.

Body h2 {color: green;}

/ / A bonus of two ordinary elements, and the result is 0pd0j0j0pd2 * /-- the latter wins.

H3.grape {color: purple;}

/ / A normal element and a class selector are added, and the result is 0meme 0pm 1pm /

H3 {color: silver;}

/ / an ordinary element, and the result is 0pm 0pl 0je 1 * /-- the former wins.

Html > body table tr [id= "totals"] td ul > li {color: maroon;}

/ / 7 ordinary elements, one attribute selector, two other selectors, and the result is 0mem0re1jue 7 * /

Li#answer {color: navy;}

/ / An ID selector, an ordinary selector, and the result is 0mem1pj0pl * /-- the latter wins.

There are some other rules besides specificity:

The priority of the style in the text is 1 ~ 0 ~ 0 ~ 0 ~ 0, so it is always higher than the external definition. Here the in-text style refers to the style in the shape of blah, while the external definition refers to the rules defined by or tags.

Yes! the rules stated by important are above all else.

If! important claims a conflict, it takes precedence.

If the priority is the same, it is determined in the order in which it appears in the source code, and the latecomer comes first.

The inherited style has no specificity calculation and is lower than all other rules (such as those defined by the global selector *).

With regard to external styles loaded via @ import, since @ import must appear before all other rule definitions (if not, the browser should ignore it), according to the principle of coming from behind, the general priority conflict is the upper hand.

It's worth mentioning that IE,IE can recognize @ import with the wrong location, but wherever @ import is, it thinks it's ahead of all other rule definitions, which can lead to some misunderstanding.

The above is all the content of the article "what is the priority of css?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.