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

This article introduces you how to understand the priority of CSS, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

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 the CSS priority problem?

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:

The code is as follows:

Div p.classSelector {color: blue}

# idselector p {color: red}

My color

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

The code is as follows:

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:

The code is as follows:

Div p.classSelector {color: blue}-(0memo 0rem 0je 1) + (0je 0rem 0rem 1) + (0je 0je 0rem 1je 0) = (0je 0rem 0je 1je 2)

# idselector p {color: red}-(0mem1re0j0re0) + (0mem0re0re0rem 0reie1) = (0meme 1meme 0jin1)

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:

The code is as follows:

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:

The code is as follows:

My color

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

The code is as follows:

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.

5. If! important is set in a style, the style will prevail regardless of its priority. (this method is strongly not recommended unless you have to, as it is certainly not in line with the css idea.)

Style sheets allow you to specify style information in a variety of ways. Styles can be specified in a single HTML element, in the header element of the HTML page, or in an external CSS file. You can even reference multiple external stylesheets within the same HTML document. Which style is used when the same HTML element is defined by more than one style?

In general, all styles are cascaded in a new virtual stylesheet according to the following rules, where the number 4 has the highest priority.

Browser default settings

External style sheet

Internal style sheet (located inside the label)

Inline style (inside the HTML element)

Therefore, inline styles (within the HTML element) have the highest priority, which means that they take precedence over style declarations in tags, external stylesheets, or browsers (default values). This is just a big priority. As we mentioned in the previous article, CSS has many selectors, so what is the priority of each selector for the same style of CSS?

If we think of a CSS as a three-digit number and get the priority by comparing the size of the number, it will be quite simple. Here, you can define the corresponding numbers for each selector through the following rules.

The hundred digits is the sum of the number of id on the selector

Ten digits are the sum of other property selectors and pseudo classes used on this selector. This includes class (.example) and property selectors (such as li [id=red])

Single digits are computational elements (like table, p, div, *, etc.) and pseudo elements (like first-line, etc.)

If the numbers corresponding to the two selectors are equal, that is, they have the same priority, the latter one in the stylesheet works.

Rules marked with "! important" have the highest priority, such as H1 {color:black! importan; font-family:sans-serif}, and the foreground color is marked important, which has a high priority. However, such statements can easily cause confusion, so they are usually used less.

Selector value

H2 {color:blue;} 1

P em {color:purple;} 1 + 1 = 2

.apple {color:red;} 10

P.bright {color:yellow;} 1 + 10 = 11

P.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22

# id316 {color:yellow} 100

We can also check which CSS works through browser plug-ins, such as Firebug (Firefox), Developer Tools (IE8), and so on. As we mentioned above, which CSS works depends on the location when the priority is the same, and the later CSS usually has a higher priority. But for IE browsers, dynamic CSS with the same value depends on the order in which it is added, not where it is added; the priority is higher.

Principle one-inheritance is not as good as specification.

Principle two-# ID > .class > tag selector.

Principle 3-the more specific, the stronger.

Principle 4-label # id > # id; tag. Class > .class.

Principle five-principle one > principle two > principle three > principle four.

On how to understand the priority of CSS to share here, I hope that the above content can be of some help to 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.