Analysis on weight, cascading and importance (!important) in CSS

The following is a brief discussion on the importance of CSS weight cascading (!important). The content is quite good, so I will share it with you now and give it as a reference.

1. Speciality weight

#Sometimes we set different CSS style codes for the same element, then the element will be enabled Which CSS style? Let’s take a look at the following code:

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Both p and .first match the p tag, so which color will be displayed? green is the correct color, so why? This is because the browser determines which CSS style to use based on the weight, and the CSS style with the higher weight is used.

The following are the weight rules:

The weight of the tag is 1, the weight of the class selector is 10, and the maximum weight of the ID selector is 100 . For example, the following code:

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

Note: There is another special weight--inheritance also has a weight but it is very low. Some literature proposes that it is only 0.1, so it can be understood as inheritance. has the lowest weight.

2. Cascading

If there can be multiple css styles for the same element in the html file and What should I do if these multiple css styles have the same weight value? Well, the cascading in this section helps you solve this problem.

Cascading means that there can be multiple css styles for the same element in the html file. When there are styles with the same weight, it will be determined based on the order of these css styles. The last css style will be applied.

Such as the following code:

p{color:red;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

Finally, the text in p will be set to green. This cascading is easy to understand. It is understood that the later styles will overwrite the previous styles.

So the previous CSS style priority is not difficult to understand:

Inline style sheet (inside the tag)> Embedded style sheet (in the current file)> ; External style sheet (in external file) .

3. Importance

When we are doing web page code, there are some special situations where we need to set the highest weight for certain styles. ,what to do? At this time we can use !important to solve it.

The following code:

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

At this time, the text in the p paragraph will be displayed in red.

Note: !important should be written in front of the semicolon

Note here that when the web page creator does not set the css style, The browser will display web pages according to its own set of styles. And users can also set their own custom styles in the browser. For example, some users are used to setting the font size to a larger size so that they can view the text of the web page more clearly. At this time, pay attention to the style priority: Browser default style < Web page creator style < Style set by the user , but remember that the !important priority style is an exception, and its weight is higher than the user's own The style set.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About how to solve the problem that calc in CSS3 is calculated when less is compiled

About CSS3 Analysis of the difference between animation attributes transform and transition and animation attributes

The above is the detailed content of Analysis on weight, cascading and importance (!important) in CSS. For more information, please follow other related articles on the PHP Chinese website!