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

This article mainly explains "what is the priority order of css style". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the priority order of css style".

A better understanding of which css styles give priority to writing css code is clearer and more organized, so let's take a look at the three css rules that govern a given html element:

Css priority calculation

Css inheritance

Css cascading

Learning these rules will enable your CSS developer to climb to another tall building.

Priority calculation

Imagine that your html contains a paragraph that applies a kind of "creature". You also have the following two css rules:

P {font-size:12px}

P.bio {font-size:14px}

Do you want the text size in the paragraph to be 12px or 14px? In this case you can guess that it will be 14px. The second line of css (p.bio) is more specific than your class= "bio" paragraph. However, sometimes priorities are not easy to see.

For example, consider the following html and css

The text is here.

Divp.bio {font-size:14px}

# sidebarp {font-size:12px}

At first glance, the first line css may seem more specific, but in fact the second line above is more consistent with the font size of the paragraph. Why is that?

To answer this question, we need to consider the priority rule.

The specificity is calculated by calculating the various components of css and expressing them in the form of (ameme breco cpene d). This will be clearer through an example, but the first is the component.

Element, pseudo element: dumb1-(0meme 0j0jin1)

Class, pseudo-class, attribute: censor 1-(0re0jin0jin1re0)

Id:b=1- (0meme1pd0p0p0pl)

Inline style: axiom 1-(1pm 0j0pl 0pl 0)

Id is more specific than a class rather than an element.

You can calculate the priority by calculating each of the above items and adding a meme b _ r c or d by 1. It is also important to note that zero one is more specific than zero fifteen. Let's look at some examples to make the calculation clearer.

PRV 1 element-(0rec 0pl 0pl 1)

Div:1 elements-(0pl 0pl 0pl 1)

# sidebar:1 id- (0mem1pence0p0re0)

Div#sidebar:1 elements, 1 id- (0pm 1pm 0je 1)

Div#sidebarp:2 elements, 1 id- (0penny 1penny 0penny 2)

Div#sidebarp.bio:2 elements, 1 class, 1 id-.

Let's look at the above example again.

Divp.bio {font-size:14px}-(0re0pence1penny 2)

# sidebarp {font-size:12px}-(0meme1pence0pen1)

The second has a higher priority, so it takes precedence.

The last point before we move on. Importance trumps priority when you use it! When important marks the css attribute, you override priority rules, and so on

Divp.bio {font-size:14px! Important}

# sidebarp {font-size:12px}

Indicates that the first line above css takes precedence over the second line.! Important still revolves around the particularity of the basic rules, and if you understand how the rules work, you should never need them.

Inherit

The idea behind inheritance is relatively easy to understand. Element inherits styles from its parent container. If the body tag is set to use color:red, the text of all elements in the body will also be red unless otherwise noted.

However, not all css properties are inherited. For example, margins and padding are non-inherited properties. If you set margins or padding on div, paragraphs within div do not inherit the margins and padding that you set on div. This paragraph will use the default browser margins and padding until you declare otherwise.

However, you can explicitly set the property to inherit the style from its parent container. For example, you can declare

P {margin:inherit; fill: inheritance}

Then your paragraph will inherit from its containing elements.

Cascading

At the highest level, cascading controls all css priorities, and does the following.

1. Find all css declarations that apply to related elements and attributes.

2. Sort by origin and weight. Origin refers to the source of the declaration (author style, user style, browser default), and weight refers to the importance of the declaration. (the author's weight is greater than the user's weight than the default value.! Important is more important than the normal statement)

3. Calculate the priority

4. If two of the above rules are the same, then the last rule wins. CSS embedded in html always comes after external stylesheets, regardless of the order in html.

The # 3 above is probably the one you need to pay attention to most. With # 2, you just need to know that your style will override the way users set up the browser, unless they set the rule to be important.

Also be aware that your style will override browser defaults, but these defaults do exist and often cause cross-browser problems. Using a reset file, such as EricMeyer's CSS reset or Yahoo's YUI reset CSS, helps exclude the default style from the equation.

Thank you for your reading, the above is the content of "what is the priority order of css style". After the study of this article, I believe you have a deeper understanding of what the priority order of css style is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.