What is the css selector priority order? Introduction to css basic selector priority

There are many types of selectors in css, so the concept of priority will naturally appear. So, what is the priority order of css selectors? This article will introduce you to the priority ordering of CSS selectors. Without further ado, let’s go directly to the main text.

Before looking at the priority order of css selectors, let’s briefly talk about What are the basic css selectors?

1. Tag selector (such as: body, div, p, ul, li)

2. ID selector (such as: id="name", id="name_txt")

3. Class selector (such as: id="name",id="name_txt")

4. Descendant selector (such as: #head .nav ul li from parent set to Descendant set selector)

5. Child element selector (such as: div>p, with greater than sign>)

6. Pseudo-class selector (such as: link style, Pseudo-class of a element, 4 different states: link, visited, active, hover.)

After reading the basic css selector types, let’s take a look at the concept of css priority .

When two rules apply to the same html element, if the defined attributes conflict, whose value should be used, and whose value is used will have higher priority.

Let’s take a look at the algorithm of CSS selector priority:

Each rule corresponds to an initial "four-digit number": 0, 0, 0, 0
If it is an inline selector, add 1, 0, 0, 0
If it is an ID selector, add 0, 1, 0, 0
If it is a class selector/pseudo-class selector, add 0 respectively , 0, 1, 0
If it is an element selector, add 0, 0, 0, 1 respectively
Algorithm: Add the numbers corresponding to the selectors in each rule to get the "four-digit number" , compared from left to right, the larger one has higher priority.

After reading the above content, let’s take a look at the specific ordering of css selector priority.

The css selector priority order from highest to lowest is:

1.id selector (#myid)

2.Class Selector (.myclassname)

3. Tag selector (div, h1, p)

4. Child selector (ul < li)

5. Descendants Selector (li a)

6. Pseudo-class selection (a:hover, li:nth-child)

Finally, what needs to be noted is:

!important The priority is the highest, but when a conflict occurs, the "four digits" need to be compared;
When the priorities are the same, the nearest principle is adopted and the last style is selected;
Inherited attributes, their priority lowest.

The above is the entire content of this article. Of course, there are more than six selectors mentioned above about css selectors. For more information about css selectors, please refer to css User Manual.

The above is the detailed content of What is the css selector priority order? Introduction to css basic selector priority. For more information, please follow other related articles on the PHP Chinese website!