Deeply understand the use of !important in CSS

This article focuses on the priority of CSS styles, mainly talking about CSS! How to use important, friends who are learning this knowledge can take a look, I hope it will be helpful to you!

!important provides developers with a way to increase style weight. It should be noted that !important is a declaration of the entire style, including the attributes and attribute values ​​of this style

<style type="text/css">
a{color:green!important;}
#main a{ color:blue;}
</style>
<div id="main">
<a>!important实例</a>
</div>

For the above code, if the important attribute is not added, the color of the hyperlink will be blue, but After adding important, the priority is increased and the display color is green.

<style>
#Box div{
     color:red;
}
.important_false{
     color:blue;
}
important_true{
     color:blue !important;
}
</style>
<div id="Box">
    <div class="important_false">这一行末使用important</div>
    <div class="important_true">这一行使用了important</div>
</div>

The first line of CSS code sets the font color of all divs in the box to red. The second and third lines use class to redefine the font color of their own divs to blue. The difference is , important is used at the end of the second line, and ! is used in the third line!
By default, the priority of class is lower than id. Therefore, even if you use class to redefine your own style in the second line, it will not take effect. Therefore, if you inherit the parent attribute, this line of text is still red!
However, in the third line, important is used to increase the priority (or regarded as forced redefinition), so the css here takes effect and this line of text turns blue!

Another thing worth noting is that if the style is written like this:

.testClass{ 
color:blue !important; color:red;
}

This way of writing is not recognized under IE6! important is displayed in red, but you can also use the following method to make IE6 !important

.testClass{ 
color:blue !important; 
} 
.testClass{ 
color:red; 
}

The above is the detailed content of Deeply understand the use of !important in CSS. For more information, please follow other related articles on the PHP Chinese website!