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

This article shares with you the content of a sample analysis of CSS style override rules. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First of all, it needs to be clear that in many cases, an element will be used in multiple styles, and the rules for style coverage also need to be determined according to different circumstances, as follows.

Rule 1: when a style conflict occurs due to inheritance, the nearest ancestor wins.

CSS's inheritance mechanism allows an element to inherit styles from the ancestor element that contains it, considering the following:

Rule 1 body {color:black;} p {color:blue;}

Welcome to gaodayue's web log

Strong inherits the color attribute from body and p, respectively, but because p is closer to strong on the inheritance tree, the text in strong eventually inherits the blue of p.

Rule 2: when the inherited style conflicts with the directly specified style, the directly specified style wins.

In the above example, if you also specify the style of the strong element, such as:

Strong {color:red;}

So according to rule 2, the text in strong ends up in red.

Rule 3: when a conflict occurs in a directly specified style, the one with high style weight wins.

The weight of the style depends on the selector of the style, and the weight is defined in the following table.

CSS selector weight

Tag selector 1

Class selector 10

ID selector 100

Inline style 1000

Pseudo elements (: first-child, etc.) 1

Pseudo class (: link, etc.) 10

As you can see, the weight of the inline style > > ID selector > > class selector > > tag selector, in addition, the weight of the descendant selector is the sum of each weight, for example, the weight of "# nav .current a" is 100 + 10 + 1 = 111.

Rule 4: when the weight of the style is the same, the latter wins.

Consider the following situation

Written by Jean Graine de Pomme

12 .byline a {color:red;} p .email {color:blue;}

Both ".byline a" and "p. Email" specify the above an element directly, with a weight of 11, and end up in blue according to rule 4.

Because stylesheets can be external or internal, rule 4 reminds us to pay attention to the order in which external stylesheets are introduced (and the order of elements), and where external and internal stylesheets appear. In general, internal stylesheets appear after the introduction of all external stylesheets, usually before.

Rule 5:! the style property of important is not overridden.

! important can be seen as the "golden finger" to break the above four rules as a last resort. If you must use a style attribute without letting it be overridden, you can add! important after the attribute value. Take Rule 4 as an example, ".byline a {color:red! important;}" can force the link to show red. In most cases, style coverage can be controlled in other ways and cannot be abused! important.

Thank you for reading! This is the end of this article on "sample analysis of CSS style coverage rules". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.