How complicated is the priority of CSS styles?

Last night, I was looking at an interview question and found that some people were not particularly clear about the priority of CSS styles. In addition, I have been summarizing this knowledge point before. Today, I will take some time to write down what I know, so that we can make progress together...
The priority of CSS styles is a complex knowledge point. I even think its complexity can be compared with "floating" and "box model". I have thought about this article for a long time, and perhaps it can be summarized in this rhyme, namely "one year, two positions, three important, and four special". The following is a detailed explanation:

1. "Carry"
The "载" here refers to the carrier, that is, the style sheet. For developers, the one that is often involved is just "load", but there are two more. What are they? The details are as follows:
1. User-side style sheet: This is the default style sheet of the browser. Only when its rules are followed can the original attributes of div be "display:block" and span be "display:inline".
2. User style sheet: a style sheet defined by the person using the browser. Maybe you can’t understand it, but the fact is that you can do it. For the specific setting method, I will take Firefox as an example. The steps are as follows: (1) Menu bar "Help" -> Troubleshooting Information -> Application Basics -> Open the folder -> Chrome; (2) Create a CSS file named userContent.css, edit it, add the required styles, and save it. Note that the name must be userContent.css and cannot be changed. Otherwise it will be invalid; (3) Restart Firefox. I took the "Hot Discussions" on the w3cfuns homepage as an example and set its style. The results are as follows:

The original effect is as follows:

Through the above aspects, we can automatically change the way the website is presented.
3. Author style sheet: This is the one we are most familiar with, which is the style sheet written by the developer. The style sheet we often talk about actually stays at this level because it is the closest to us!

2. Position
The reason why "position" is placed in the second point is due to the following considerations: (1) "position" refers to two points: the location of the style declaration and the location of the style sheet link; (2) Whether it is the location of the style declaration or the location of the style sheet link, it is specific to the developer, which is the third point in "load", so we must first explain "load".

Now that the reasons are clear, let's get down to the specifics of "position". Just like the first point in the reasons, I will start from two points:
1. Location of style declaration: Generally speaking, there are four ways to declare a style. Excluding @import and another one (which is rarely used, so I forgot its name), there are currently two common ways: inline and external. The style tag is used for inline and the link tag is used for external. At this point, excluding the interference of style styles (mentioned in the fourth point), the style priority follows the principle of later-comers, that is, the styles declared later in the style sheet have a higher priority than those declared earlier. For example, in the style.css file, the following style is declared in the first line:

Copy code

The code is as follows:

p{color:#f00;}

The third line declares the following style:

Copy code

The code is as follows:

p{color:#000;}

Then, the final font color of p is black.

2. Location of style sheet links: The same style may be declared in two style sheets, and the same HTML page may call these two style sheets at the same time. In this case, the priority of the styles can still be determined based on the principle of later-comes-up, but the later-comes-up objects are different. For example: In an HTML page, the head code is as follows:

Copy code

The code is as follows:

At this time, if you declare such a style in firstStyle.css:

Copy code

The code is as follows:

p{color:#f00;}

And in secondStyle.css, the following style is declared:

Copy code

The code is as follows:

p{color:#000;}

Then, the final font color of p is black. It depends on the stylesheet that is linked later.

3. “Important”
“Important” means important. With an exclamation mark, it means it is of utmost importance. Therefore, general style declarations are like Kunpeng in the Happy Journey to the West. In the end, it can only “sigh in despair”. But from the word "load", we will think again, if an important style is declared in the user style sheet and an important style is also declared in the author style sheet, which one has a higher priority?
Therefore, the explanation of "position" in the second point seems to have certain limitations. Starting from "load", combined with "important", the priority comparison can be extended to the following 5 points:
1. Style declared by the user end
2. User styles without !important
3. Author styles without !important
4. Added !important author style
5. User styles with !important are sorted in ascending order. That is, the style of point 5 is higher than that of point 4, and so on. For developers, it should be said that adding important is the highest level, and later styles cannot replace it. This is why the use of important should be avoided as much as possible in styles. Because once important is declared, the style level reaches the highest level, and the core mechanism of CSS, the cascade, loses its meaning. It is necessary to pay attention to this point.

4. “Special”
In the description of "position", I skipped the style tag and went straight into a point, namely, the principle of catching up from behind; and gave the example of the p tag. In fact, for experienced front-end personnel, the example I gave is not "proper", because not many people would be bored enough to declare the styles of two p elements in the same style sheet, using the latter to replace the former. In fact, I just wanted to illustrate the principle. Okay, let me give you another example to illustrate the point of “special”. First a piece of html code:

Copy code

The code is as follows:

<div id="firstDiv" class="firstDiv">
<div id="secondDiv" class="secondDiv">
<p id="pElem" class="pElem" style="color:black;">happy</p>
</div>
</div>

The following styles are written into a style sheet named style.css:

Copy code

The code is as follows:

#firstDiv #secondDiv #pElem{color:red;}
#firstDiv #secondDiv .pElem{color:yellow;}
#firstDiv .pElem{color:blue;}
#firstDiv p{color:gray;}

As you can see, the font color of p is black. When the style tag is deleted, the font color of p is red. When the first line of the style sheet is deleted, the font color of p is yellow, and then blue and gray.
This feature of CSS is called "specificity" contrast. There is a set of established contrast methods, and their positions can be represented by the four letters a, b, c, and d. a refers to the style tag, b refers to the ID selector, c refers to the class selector and pseudo-class, and d refers to the element selector and pseudo-element.
The way to compare them is: when a is the same, compare b; when a and b are the same, compare c; when a, b and c are the same, compare d. What if they are all the same? "Come from behind and win".

Let’s explain this with the example above. Because style exists in p, that is, a exists, it has the highest priority, so the font color of p is black. When style is deleted, a does not exist, so the ID selector is considered. The first css declaration has 3 IDs, which is more than the following ones, so it is the final style; and so on.

Conclusion : I originally just wanted to spend some time writing, but I didn’t expect it to take so much time, it’s a bit exaggerated! It should be said that this article covers almost all aspects of priority. I don’t know if you can see it clearly. Some of the codes in this article have not been tested. They are only obtained based on some experience and previous experiments. The results may be wrong. If you find any, please point them out. But in general, it is still relatively responsible and will not "mislead students". This concludes...

<<: MySQL learning database search statement DQL Xiaobai chapter

>>: Solution to css3 transform transition jitter problem

Ubuntu Docker installation in vmware (container building)

How complicated is the priority of CSS styles?

Ubuntu Docker installation in vmware (container building)

jQuery implements the practice of changing the position and size of div by dragging the mouse

Example code for implementing an Upload component using Vue3

Detailed process of drawing three-dimensional arrow lines using three.js

Docker uses Git to implement the detailed process of Jenkins release and test projects

Implementation of MySQL Shell import_table data import

Detailed explanation of Vue.js directive custom instructions

Why the CSS attribute value clear:right does not work in detail

js to write the carousel effect

How to enter directory/folder in Linux without using CD command

Recommend

Detailed steps for building Portainer visual interface with Docker

Detailed explanation of using echarts map in angular

Pure CSS3 to achieve mouse over button animation Part 2

Share the pitfalls of MySQL's current_timestamp and their solutions

A simple method to merge and remove duplicate MySQL tables

How to count down the date using bash

A brief talk about JavaScript variable promotion

Fabric.js implements DIY postcard function

Vue + element to dynamically display background data to options

Method example of safely getting deep objects of Object in Js

MySQL practical skills: analysis of methods to compare whether two tables have different data

Detailed explanation of the use of Vue mixin

What are inline elements and block elements?

Details of the underlying data structure of MySQL indexes

Vue keeps the user logged in (various token storage methods)