The role of important in CSS

!important is the syntax defined by CSS1, which is to increase the application priority of the specified style rule. Syntax format {cssrule!important}

{*cssrule!important} This CSS rule today in Web page production of the popularity of the time is very popular, before I understand it to stay in the ' browser recognition phase ' and not really to study, but now has changed. Let's look at a few examples.

Example one:

Css

#Box {

Color:red!important;

Color:blue;

padding:30px;

width:300px;

BORDER:1PX solid Pink;

}

Html

<div id= "box" >

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

</div>

In browsers that support this syntax, such as Firefox, Opera, and chrome, you can understand the priority of!important, the font color shows the red color, and blue is displayed in IE. Because IE browser does not recognize!important, non-IE browser recognizes!important, and the!important priority is higher. Then look at the following example, just the CSS style inside the Color property Exchange order, the HTML code part of the same, what will happen?

Css

#Box {

Color:blue;

Color:red!important;

padding:30px;

width:300px;

BORDER:1PX solid Pink;

}

In this case, both IE and non-IE browser recognition, the font color will show the red color. Although IE does not recognize!important, it recognizes the color:red in the phrase "color:red!important;" Therefore, under IE, the browser recognizes "Color:blue" first, and then identifies the color:red in "color:red!important;", thus overwriting the previous "color:

Blue ", so the last font color shows up as red.

