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

This article introduces the relevant knowledge of "what is the priority rule of CSS". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

HTML Advanced Tips: explain CSS priorities in detail

CSS priority problem is actually a conflict resolution problem. When the same element (or content) is selected by CSS selector, it is necessary to choose different CSS rules according to priority, which involves a lot of problems.

First of all, there is the specificity (particularity) of the CSS rule. 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, the more special it is, and the more advantageous it is in CSS 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 0mem1j0re0.

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

◆ each element or pseudo element (: firstchild), etc., add 0memo 0re0rem 1

Other selectors include the global selector *, plus 0pm 0pm 0pm 0. It's equivalent to not adding, but it's also a kind of 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.

◆, give me some examples:

There is only one common element addition to H2 {color:red;} / *. The result is the addition of two common elements: 0pje 0penny / bodyh2 {color:green;} / *. As a result, the latter outperforms h3.grape {color:purple;} / * a common element and a class selector, and the result is 0meme 0meme 1quote / h3 {color:silver. } / * A common element, the former wins html > bodytabletr [id= "totals"] tdul > li {color:maroon;} / * seven common elements, one attribute selector, two other selectors. The result is 0Power0Person7pointer / li#answer {color:navy;} / * an ID selector, an ordinary selector, and the result is 0Person0Pert 1Q /-- the latter wins.

Besides specificity, there are some other rules.

The CSS priority of the in-text style is 1, 0, 0, 0 and 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.

◆ has! important declares rules 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, CSS generally has the upper hand when it comes to priority conflicts.

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.

This is the end of the content of "what are the CSS priority rules". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.