The role of important in css

!important is a syntax defined in CSS1. Its function is to increase the application priority of specified style rules. Syntax format { cssRule !important }

{*cssRule !important} This css rule has become very popular when making web pages. In the past, my understanding of it stayed at the 'browser recognition stage' without really I went to study it, but now things have changed. Let’s look at a few examples.

Example 1:

CSS

#Box {

color: red !important;

color: blue;

padding: 30px;

width : 300px;

border:1px solid pink;

}

Html

In different browsers, the color of this line of text should be different!

Then in browsers that support this syntax, such as Firefox, Opera, and Chrome, the priority of !important can be understood, and the font color displays red, while in IE it displays blue. Because the IE browser does not recognize !important, non-IE browsers recognize !important, and !important has a higher priority. Then look at the following example, just exchange the order of the color attribute in the CSS style, and the Html code part remains unchanged. What will happen?

CSS

#Box {

color: blue;

color: red !important;

padding: 30px;

width : 300px;

border:1px solid pink;

}

Then In this case, regardless of whether it is recognized by IE browser or non-IE browser, the font color will display red color. Although the IE browser does not recognize !important, it recognizes the color:red in the sentence "color: red !important;". Therefore, under IE, the browser first recognizes "color: blue", and then recognizes the color: red in "color: red !important;", thus covering the previous "color:

blue", so the final font color All are displayed as red.