Turn: The role of!important in CSS

Ext.: http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

{*rule!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. As we all know,!important this rule to ie6.0,ie7.0 and Firefox can write hack, now to explain what this principle:

* For IE series browser can be recognized, Firefox browser is not recognized;

!important only Ie7.0 and Firefox can be identified, but Ie6.0 cannot be applied successfully.

(1) The difference between IE and Firefox hack: border:2px solid #f00; *border:1px solid #f00;

(2) The difference between Ie6.0 and Ie7.0, Firefox hack: border:1px solid #f00!important;border:2px solid #f00;

In (1), the reason why the * is placed in the back because the FF does not recognize * and caused only one border, and the IE series two times after the border settings, the latter property overrides the previous attribute, it is a pixel border.

In (2), the reason for putting!important in the first border setting is because it increases the priority of this border, even if the border is not valid at one time or even in the nth settings. But Ie6.0 does not accept this rule, which causes it to apply the second border setting, which is the second time it overrides the first principle, not that it does not recognize!important, so its border is a 2-pixel red box.

This is a simple application:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
div{
width:800px;
height:250px;
background-color:yellow!important;/* elevation of application priority for specified style rules */
background-color:red;
BORDER:3PX Solid #000!important;/*firefox*/
*border:5px Solid #f00!important;/*ie7.0*/
border:1px solid #000;/*ie6.0*/
}
</style>

Example one:
Css
1 #Box {
2      color:red!important;
3      Color:blue;
4}
Html
1 <div id= "box" > in different browsers, the color of this line of words should be different! </div>
This example should be commonly seen by the use of important, in the IE environment, the line is blue, in Firefox, for the red, its usage no longer say, see the next example.
Example two:
Css
1 #Box div{
     color:red;
}
2. important_false{
     Color:blue;
}
3.important_true{
     Color:blue!important;
}
Html
<div id= "box" >
    <div class= "Important_false" > Use important</div> at the end of this line
    <div class= "Important_true" > This line uses the important</div>
</div>
Example two, the first line of CSS code set box inside all div in the font color is red, the second row and the third row have redefined their own div font color blue, the difference is that the second line at the end of the use of important, and the third row used!

By default, class has a priority less than ID, so the second row uses the class to redefine its own style and cannot take effect, so inherit the parent property, and the line is red!
However, in the third row, the important is used to elevate the priority (or as a forced redefinition), so the CSS here is in effect, and this line of words becomes blue! From this example, to prove thatie to important is not unsupported!

So why do many people say IE does not know it? I think we may not have encountered the case in the actual situation:   What to do when you want to promote class priority?

That is to say, you may have overlooked this role, only to understand that in the CSS code block named the same element, it is used to promote the order of precedence of the preceding code (example one)!
Through the top two examples, we can summarize:
Important to a good (or standard) browser, not only in order to improve the priority of the code, but also can be used to promote class priority (such as Firefox), but from IE to the former does not support can be seen, this is only a big bug in IE, and can not say it " Do not know, do not support "!

However, in any case, this big bug of IE helps us solve many compatibility problems, which is obviously not a bad thing!
The explanation of the box model (Box-model) in IE is a bug, and the previous version of IE6.0 will include the border and padding values of an element in the width (rather than the width value). For example, you might use the following CSS to specify the size of a container:
　　
1 #box
2 {
3 width:100px;
4 border:5px;
5 padding:20px;
6}
　　Then apply it in HTML: The total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5-pixel border + two 20-pixel padding), but still 100 pixels (border values and padding values are included in the width value) in the browser version prior to IE6. The use of box model hack can solve this problem,
　　


width:150px;  //This is the wrong width, all browsers have read the
Voice-family: \}\; IE5. X/win ignores the content after \}\
Voice-family:inherit;
width:100px; Some browsers, including Ie6/win, read this sentence, and the new value (300px) covers out the old

       There are more simple ways to do this:
Css:
#box {width:150px;}
#box Div {border:5px; padding:20px;}
Html:
...
This way the total width of the box in any browser will be 150 pixels.
But even if the latest IE6.0 still has a floating model (Float-model), is it fortunate (or sad?). Is that we can solve this problem with!important which has been not supported in IE.
!important is the syntax defined by CSS1, which is to increase the application priority of the specified style rule (see: W3.org's explanation). The syntax format {srule!important}, which is written in the last face of the definition,
For example:
If we define a style like this:
　　　　　
#box {background-color: #ffffff!important; Background-color: #000000;}
Then in support of this syntax browser, such as Firefox, Opera, can understand!important priority, background display #ffffff color, and in IE display #000000.
#1楼2011-08-24 14:45 | constant flow with waterWell, first of all, I only saw the top half of the blog post before it was published, and I've always thought IE6 didn't recognize it! Important, read the author's article Harvest is very large, his own test to verify the author's views. Just for you to say "the second line is not using important, and the third line is used!" By default, class has a priority less than ID, so the second row uses the class to redefine its own style and cannot take effect, so inherit the parent property, and the line is red! "See here, I think the author in writing this article may not be tested, class priority is less than the ID is right, but if there is no ID in a layer only CLSS, then this layer is of course the priority class style, rather than the priority of its parent ID style, so the second row even if it is not used! Important It still shows blue instead of red, which the author can test.
Thank you!
Turn: The role of!important in CSS