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

Today, I will talk to you about how to understand the priority of attributes in the preparation of CSS. Many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

When you add a style to an element and find that it doesn't work, you have a priority problem. So how to deal with CSS priority issues? here are some common rules for solving CSS priority issues.

Style distanc

We can add specified styles to elements by using external styles, internal styles, inline styles, and so on, and the priority at this time is:

External styl

Blue > green. So the my color is displayed in red.

A special method of calculation

Suppose you have the following code:

CSS Code copies content to the clipboard

Div p.classSelector {color: blue} # idselector p {color: red} my color

Faced with the following css, how do we determine the priority?

CSS Code copies content to the clipboard

Div p.classSelector {color: blue} # idselector p {color: red}

Here is a special calculation method:

Element, pseudo element: 1-(0pm 0pl 0pl 1)

Class, pseudo-class, attribute: 1-(0pm 0je 1pm 0)

ID: 1-(0pc1pl 0p0p0p0)

Inline style: 1-(1pc0pl 0p0pl 0)

The attributes here refer to:

The effect is as follows:

Priority increases from top to bottom, and as for how to calculate it, it is also illustrated by an example:

P: 1 element-(0pl 0pl 0pl 1)

Div: 1 element-(0pr 0pl 0pl 1)

# idSelector: 1 ID-(0pm 1pm 0je 0)

Div#idSelector: 1 element, 1 ID-(0meme 1j0jue 1)

Div#idSelector p: 2 elements, 1 ID-.

Div#idSelector p.classSelector: 2 elements, 1 class, 1 ID -.

So now let's look at the above example:

CSS Code copies content to the clipboard

Div p.classSelector {color: blue}-(0je 0je 0jue 1) + (0je 0je 0je 1) + (0je 0) = (0je 0lle 1) # idselector p {color: red}-(0m 1)-(0) + (0) (0)

We know that the last color displayed is red because of the priority (0priori 1) > (0pc0re1) > (0pc0re1).

Inherit

Inheritance is an easy-to-understand concept, that is, child elements inherit the style of the parent element. For example:

CSS Code copies content to the clipboard

My color

The span in the example above inherits the style of the parent element div. However, not all properties use inheritance by default, such as the margin and padding properties. For example:

CSS Code copies content to the clipboard

My color

At this point, element p does not inherit the margin and padding styles of the parent element div, unless you do:

CSS Code copies content to the clipboard

My color

Summary

1. First find all the styles that act on the element. (don't ignore styles from inheritance)

two。 The closer the distance of the calculation style, the higher the priority.

3. A special calculation method is used to judge the style at the same distance.

4. If the calculated result is the same, the later declared style overrides the previously declared style.

After reading the above, do you have any further understanding of how to understand the priority of attributes in CSS writing? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.