Explanation of CSS priority

Source: Internet
Author: User
Tags number strings

LectureCSSBefore priorities, we need to know what CSS is and what CSS is used.

First, we will give a simple description of CSS: CSS is short for Cascading Style Sheet. Its specifications represent a unique stage of development in the history of the Internet. For those who are engaged in creating web pages, we should have never heard of CSS, because we often need to use it in the process of creating web pages.

Second, we can use CSS to set a rich and easy-to-Modify appearance for documents, so as to reduce the workload of Web Page makers and the cost of production and post-maintenance.

As a matter of fact, I still want to talk about what CSS is, and what effect CSS has is totally redundant. I believe that all the friends who are engaged in creating web pages have been more or less touched.

Let's get to the point where we start today:

1. What is the CSS priority?

The so-called CSS priority refers to the order in which CSS styles are parsed in the browser.

Ii. CSS priority rules

Since the style has a priority, there will be a rule to specify this priority, and this "rule" is the focus of this article.

The particularity in the style sheet describes the relative weights of different rules. Its basic rules are:

  1. Count the number of ID attributes in the selector
  2. Count the number of class attributes in the selector
  3. Count the number of HTML tag names in the selector

Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number (css2.1 is represented by four digits ). (Note: You need to convert a number into a larger number ending with three digits ). The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number.

For example:

  1. Select the identifier (# someid) for each ID, and add 0, 1, 0, 0
  2. Each Class Identifier (. someclass), each attribute identifier (such as [ATTR = value]), and each pseudo class (such as hover) plus
  3. For each element or pseudo element (: firstchild), add
  4. Other delimiters include the Global delimiters *, which are 0, 0, and 0. It is equivalent to not adding, but this is also a specificity, which will be explained later
3. Feature Classification selector list

The following is a list of feature-specific delimiters:

Selector

Feature value

H1 {color: Blue ;}

1

P em {color: Purple ;}

2

. Apple {color: red ;}

10

P. Bright {color: yellow ;}

11

P. Bright em. Dark {color: Brown ;}

22

# Id316 {color: yellow}

100

From the above table alone, it seems that it is not easy to understand. Here is another table:

Selector

Feature value

H1 {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

From the above, we can easily see that the weight of the HTML Tag is 1, the weight of the class is 10, the weight of the ID is 100, and the inherited weight is 0 (will be discussed later ).

According to these rules, the number strings are added by bit to obtain the final weight, and then compared by bit in the order from left to right during comparison.

The priority problem is actually a problem solved by a conflict. When the same element (content) is selected by the CSS selector, CSS rules with different priorities should be selected, this involves a lot of problems.

Speaking of this, we have to talk about the inheritance of CSS.

Iv. Inheritance of CSS4.1 inheritance Performance

Inheritance is a major feature of CSS. It depends on the relationship between ancestor and descendant. Inheritance is a mechanism that allows a style to be applied not only to a specific element, but also to its descendants. For example, the color value defined by a body is also applied to the text of a paragraph.

Style definition:

Body
{Color: # f00 ;}

Example code:

<P> CSS <strong> inheritance </strong> test </P>

Example:

The application result of this Code section is: the "CSS inheritance test" section is red, and the word "inheritance" is bold because the <strong> label is applied. Obviously, this section inherits the color defined by the body {color: # f00;} style. That is why inheritance is part of CSS.

However, the weight of CSS inheritance is very low, and it is 0 lower than that of common elements.

Let's take the preceding example code as an example: add one in the style definition:

Strong
{Color: #000 ;}

Example:

You only need to add a color value to <strong> to overwrite the style color inherited from <body>. It can be seen that any display declaration rule can overwrite its inheritance style.

4.2 limitations of Inheritance

Inheritance is an important part of CSS. We don't even have to consider why it works like this, But CSS inheritance is also limited.

Some attributes cannot be inherited, such as border, margin, padding, and background.

Style definition:

Div
{Border: 1px solid #000 ;}

Example code:

<Div> I am <em> border </em>. I cannot be inherited. </div>

Expected results:

Actual results:

From the above results, we can see that border cannot be inherited, and there are some other attributes, so we will not list them here.

5. Additional instructions
  1. The style priority is, so it is always higher than the external definition. In this article, the style refers to the style <Div style = "color: Red"> blah </div>, and the external definition refers to the style through <link> or <Style & gt; rules defined by the volume label.
  2. Yes! Important declares more rules than anything else.
  3. If! If important declares a conflict, the priority is compared.
  4. If the priority is the same, it is determined by the order in which the source code appears.
  5. The inherited style does not calculate specificity. It is lower than all other rules (such as rules defined by the global selector ).
  6. For external styles loaded by @ import, because @ import must appear before all other rule definitions (if not, the browser should ignore it), follow the principle of "post-Import, generally, priority conflicts take a disadvantage.

It should also be noted that IE can identify @ import with incorrect location, but it is considered to be located before all other rule Definitions No matter where @ import is located, this may cause some misunderstandings.

The priority issue looks simple, but there is still a very complex mechanism behind it. You need to pay more attention to it in practical applications.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.