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

This article will explain in detail how to fully analyze the CSS priority rules. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Let's focus on the CSS priority. Since the style has priority, there will be a rule to specify this priority, and this "rule" is the focus of this time.

Detailed explanation of CSS priority

Before we talk about CSS priorities, we need to understand what CSS,CSS is and what it is used for. Simply put, CSS is short for cascading style sheets (CascadingStyleSheets). Its specification represents a unique stage of development in the history of the Internet. Now for friends engaged in web page production, it should be rare not to have heard of CSS, because we often need to use it in the process of making web pages. We can set a rich and easy-to-modify appearance for documents through CSS to reduce the burden on web page makers, thus reducing the cost of production and post-maintenance.

In fact, now still talk about what CSS is, what is the role of CSS is completely superfluous, I believe that friends engaged in web page production have been more or less contact. Let's get down to business and get to today's topic.

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 priority, there will be a rule to specify this priority, and this "rule" is the focus of this time.

The particularity in the stylesheet describes the relative weights of different rules, and 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.

* write three numbers in the correct order, without spaces or commas, to get a three-digit number (css2.1 is represented by four digits). Note that you need to convert the number to a larger number that ends with three numbers. The final number list corresponding to the selector can easily determine that the higher number characteristic overrides the lower number.

For example:

1. Each ID selector (# someid), plus 0mem1j0re0.

2. Each class selector (.someclass), each attribute selector (such as [attr=value], etc.), each pseudo-class (such as: hover, etc.) plus 0mem0mem1re0.

3. Each element or pseudo element (: firstchild), etc., add 0re0re0re0pl 1.

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

III. List of selectors for feature classification

The following is a list of selectors classified by property:

Judging from the table above, it seems not easy to understand. Here is another table:

From the above, you can simply 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 weight of inheritance is 0 (we'll talk about it later).

The numeric strings are added bit by bit according to these rules, and the final weight is obtained, and then compared bit by bit from left to right when comparing the trade-offs.

Priority problem is actually a conflict resolution problem. When the same element (content) is selected by CSS selector, it is necessary to choose different CSS rules according to priority, which involves a lot of problems.

On how to fully analyze the CSS priority rules 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.