The priorities of css introduction methods and the differences between priorities of different selectors.

The priorities of css introduction methods and the differences between priorities of different selectors.

We all know that css has three basic settings:

1. Also known as embedded in a row, for example:

<div style='background:red'></div>

 

2. inline, wrapped with style labels in html files, for example:

 
 
3. link type, which is referenced by link tags in html files, for example:
 
Note: there is also a @ import method that is not commonly used for compatibility and is ignored.
When we use these three methods to set a style for the same target element, the priority is intra-row> inline> link.
Generally, in the same method (file), the highest priority is given to the person who is behind the file. Many people know that,
However, many people ignore the fact that different selectors have priorities.
 
Let's first recall the css selector type.

  

 
   


  
# Id {attribute name: attribute value ;}
. Class Name {attribute name: attribute value ;}
Tag name {property name: property value ;}
This is the basic selector in 3 and the composite selector they combine with each other.
We write a CSS sample file to import it to css.html.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
The base.css file is as follows:
@charset "utf-8";/* CSS Document */#red{  color:red;}.blue{  color:blue;}div{  color:black;}
 
These three style settings are for one element and should be replaced by the previous one in the Link file in order, but the result of running the browser is

This indicates that the id selector has the highest priority. For details about the selector weight, see

 
Through this image, we can calculate which setting has a higher priority. At the same time, we will realize that the priority of the link may be higher than that of embedded systems! In practice, errors may often occur due to this problem. Let's look at a real example.
On this page, the colorant settings for the next step of the button are set 3 times, and they are all in the base.css file. The subsequent color values do not overwrite the previous settings and become white, because the first circle uses class + label weight to 11, the second is class weight to 10, and the last is label weight to 1. Naturally, the first setting takes effect. The solution is very simple in the second the result is as follows:

If the weights are equal, they are overwritten.