Detailed introduction to CSS priority knowledge

Before talking about CSS priority, we need to understand what CSS is and what CSS is used for. Simply put, CSS is the abbreviation of Cascading Style Sheets. Its specifications represent a unique development stage in the history of the Internet. Nowadays, for those who are engaged in web page production, there should be few who have not heard of CSS, because we often need to use it in the process of making web pages. We can use CSS to give documents a rich and easily modifiable appearance to reduce the workload of web page creators, thereby reducing the cost of production and subsequent maintenance.

In fact, it is completely redundant to talk about what CSS is and what its functions are now. I believe that friends who are engaged in web page production have already come into contact with it to some extent. Let’s get back to the topic of today.

1. What is CSS priority?

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

2. CSS priority rules

Since styles have priorities, there will be a rule to determine the priority, and this "rule" is the focus of this article.

Specificity in a style sheet describes the relative weight of different rules. The 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 the three numbers in the correct order without spaces or commas to get a three-digit number (CSS 2.1 uses four digits). (Note that you need to convert the number into a larger number that ends with three digits). The final list of numbers corresponding to the selectors makes it easy to determine which higher numbered features override lower numbered ones.

For example:

1. For each ID selector (#someid), add 0,1,0,0.

2. Add 0,0,1,0 to each class selector (.someclass), each attribute selector (such as [attr=value], etc.), and each pseudo-class (such as :hover, etc.).

3. For each element or pseudo-element (:firstchild), add 0,0,0,1.

4. Other selectors include the global selector *, plus 0,0,0,0. It is equivalent to not adding it, but this is also a kind of specificity, which will be explained later.

3. Selector list for feature classification

The following is a list of selectors categorized by characteristics:

Just looking at the table above, it seems difficult to understand. Here is another table:

From the above, we can easily see that the weight of HTML tags is 1, the weight of CLASS is 10, the weight of ID is 100, and the weight of inheritance is 0 (which will be discussed later).

According to these rules, the number strings are added bit by bit to get the final weight, and then compared bit by bit from left to right when making comparisons.

The priority issue is actually a conflict resolution issue. When the same element (content) is selected by a CSS selector, different CSS rules must be selected according to the priority. There are actually many issues involved.

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

IV. CSS inheritance

4.1 Inherited Expressions

Inheritance is a key feature of CSS, which relies on ancestor-descendant relationships. Inheritance is a mechanism that allows styles to be applied not only to a specific element, but also to its descendants. For example, a color value defined in the BODY will also be applied to the text in the paragraph.

Style definition:

Example code:

Example effect:

The result of applying this code is: "Testing for CSS inheritance" is in red, and the word "inheritance" is in bold because of the application of tags. Obviously, this text inherits the color defined by the body {color:#f00;} style. That's why inheritance is part of CSS.

However, the weight of CSS inheritance is very low, which is 0, lower than the weight of ordinary elements.

Let's take the above example code as an example: add a line to the style definition:

Example effect:

I found that I only needed to add a color value to override the style color it inherited from. It can be seen from this that any explicitly declared rule can override its inherited style.

4.2 Limitations of inheritance

Inheritance is an important part of CSS, and we don’t even need to think about why it works this way, but CSS inheritance also has limitations.

Some properties cannot be inherited, such as border, margin, padding, background, etc.

Style definition:

Example code:

Expected results:

Actual effect:

From the above effect, we can see that border cannot be inherited, and the same is true for some other properties, which are not listed here one by one.

V. Additional Notes

1. The style priority in the document is 1,0,0,0, so it is always higher than the external definition. Here, the inline style refers to the style of <div style="color:red>blah</div>, while the external definition refers to the rules defined by the <link> or <style> tags.

2. Rules with !important declarations take precedence over all others.

3. If !important declarations conflict, compare the priorities.

4. If the priorities are the same, they will be determined in the order in which they appear in the source code, with the later ones taking precedence.

5. The style obtained by inheritance has no specificity calculation, which is lower than all other rules (such as the rules defined by the global selector *).

6. Regarding external styles loaded via @import, since @import must appear before all other rule definitions (if not, the browser should ignore it), according to the principle of later comes first, it generally has a disadvantage when there is a priority conflict.

It should also be mentioned that IE can recognize @import with the wrong position, but no matter where @import is, it is considered to be located before all other rule definitions, which may cause some misunderstandings.

The priority issue seems simple, but there is a very complex mechanism behind it, and more attention needs to be paid in practical applications.