Share a detailed analysis of CSS priorities

Before talking about CSS priority, we have to understand what CSS is and what CSS is used for.

First of all, let’s give a brief explanation of CSS: CSS is the abbreviation of Cascading Style Sheets.

Its specifications represent a unique development stage in the history of the Internet. Nowadays, for friends who are engaged in web page production, there should be few who have not heard of CSS, because before talking about CSS priority, we have to understand what CSS is and what it is used for.

First of all, let’s give a brief explanation of CSS: CSS is the abbreviation of Cascading Style Sheets. Its specifications represent a unique stage of development in the history of the Internet. Nowadays, friends who are engaged in web page production should rarely have heard of CSS, because we often need to use it in the process of making web pages.

Secondly: We can set a rich and easy-to-modify appearance for the document through CSS to reduce the work burden of web page producers, thereby reducing the cost of production and post-maintenance.

In fact, it is completely redundant to talk about what CSS is and what role it plays. I believe that friends who are engaged in web page production have already been exposed to it more or less.

Getting back to business, let’s start with today’s topic:

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 priority, there will be a rule to agree on this priority, and this "rule" is this The key points that need to be said.

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

1. Statistics on 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 adding spaces or commas to get a three-digit number (css2.1 is represented by 4 digits). (Note that you need to convert the number to a larger number ending in three digits). The final list of numbers corresponding to the selector makes it easy to determine which features of the higher number override those of the lower number.

For example:

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

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

3. Add 0,0,0,1 to each element or pseudo-element (:firstchild), etc.

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. List of selectors classified by characteristics

The following is a list of selectors classified by characteristics:

##p em {color:purple ;}##.apple {color:red;}p.bright {color:yellow;}##p.bright em.dark {color:brown;}#id316 {color:yellow}

Judging from the above table alone, it seems difficult to understand. Here is another table:

##Selector	Characteristic value
#h1 {color:blue;}	1
2
10
11
22
100

Selector	Attribute 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, it can be easily seen that the weight of the HTML tag is 1, the weight of CLASS is 10, the weight of ID is 100, and the inherited weight is 0 (will be discussed later).

Add the strings of numbers bit by bit according to these rules to get the final weight, and then compare them bit by bit from left to right when comparing and choosing.

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

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

##4. Inheritance of CSS

4.1 Performance of inheritance

Inheritance is CSS A major feature is that it 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 by BODY will also be applied to the text of the paragraph.

Style definition:

body {color:#f00;}

Example code:

Test of inheritance

Example effect:

This code The result of the application is: "Testing CSS inheritance" is in red, and the words "inheritance" are in bold because of the tag. Obviously, this text inherits the color defined by the body {color:#f00;} style. This is why inheritance is part of CSS.

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

We still take the above example code as an example: add a line in the style definition:

strong {color:#000;}

Example Effect:

I found that just adding a color value to can override the style color it inherits from . It follows that any explicitly declared rule can override its inherited style.

4.2 Limitations of inheritance

Inheritance is an important part of CSS. We don’t even need to consider why it can be like this, but CSS inheritance also has limitations.

There are some properties that cannot be inherited, such as: border, margin, padding, background, etc.

Style definition:

p {border:1px solid #000;}

Example code:

< ;p>I amborderI cannot be inherited

Expected effect:

##Actual effect:

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

5. Additional notes

The style priority within the text is 1,0,0,0, so it is always higher than the external definition. Here, in-text styles refer to styles of the form

blah

, while external definitions refer to rules defined via or

The above is the detailed content of Share a detailed analysis of CSS priorities. For more information, please follow other related articles on the PHP Chinese website!