Web page CSS priority is explained in detail for you

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

First, let us 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 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.

Secondly: We can use CSS to set a rich and easy-to-modify appearance for the document to reduce the workload of web page makers, 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.

Now, let's get back to 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 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. Counts the number of ID attributes in the selector.
2. Count the number of CLASS attributes in the selector.
3. Counts 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.

Multiple CSS style files are loaded in the web page, one of which is the style file that comes with the Ext library, which defines some styles for all tags, causing the original web page to display incorrectly. By finding the corresponding style, the correct style is reset. Add the new style to the body tag, but two styles appear and the Ext style is still valid. Finally, I found that I didn't add * when setting the new style, which made it only effective for the body tag but not for the sub-tags. The following is the modified style