[Original] CSS! Important usage Summary

The following is a brief introduction to one of the most important aspects of CSS! The important attribute summarizes the following two points from the author's practice:

1. It is used to solve IE's deviation from some CSS specifications.

For example, the effect in IE is always 2px different from that in other browsers such as Firefox and opera, leading to incorrect page layout. This is caused by the bug in IE's interpretation of the distance between boxes, we can exploit this situation! Important to help solve the problem.

For example, the following style

. Myclass {
Margin-left : 20px! Important ;
Margin-left : 40px ;

}

If it is in Firefox, opera, chrome, these browsers support it! Important attribute.Margin-left:20px! Important; This statement takes effect, which is not included in the following! The style declared by important will not overwrite it. In other words, it is the highest level, and none of the following can replace me!

However, what will happen if I change to IE, because IE does not support it! Important, that is to say, ie does not know what this sentence means, so the fool ie skipped this article, and he knows the following one, soMargin-left:40px;
It takes effect.

Note the following:

I don't mean I really don't know ie! Important, if you just want to use it! When important distinguishes ie from other browsers, you will be wrong, for example:

 

. Myclass {
Backgroud-color : Black! Important ;
}

We whimsical thought that this style is not recognized by IE, and we can make it display in other browsers. Is that true? Really not! IE also recognized it.

 

Speaking of this, are you a little confused? Does ie recognize it ???

The answer is simple. It can be used only when two styles with the same name appear at the same time, just like the following.

. Myclass{
Margin-left:20px! Important;
Margin-left:40px;

}

 

2. If you have defined a style a, such as font-size, you do not want to overwrite this font-size by style! Important. If the new style is used! Important will forcibly Overwrite

 

. {
Font-size : 12px! Important ;
}
. {
Font-size : 14px ; // Does not take effect
}

. {
Font-size:14px! Important;// Takes effect
}

Note: it must be a style with the same name, that is, a style with the same name. If it is a parent and child, it will not work. For example:

 

< Html >
< Head >
< Style >
. Father {
Font-size : 12px! Important ;
}
. Child {
Font-size : 14px ;
}
</ Style >
< Body >
< Div Class = "Father" >
< Div Class = "Child" > I am child </ Div >
</ Div >
</ Body >
</ Html >

 

In this case, the font-size of child is 14px, which is not affected by Father.

 

For more information, thank you.

 

Author: Tony Zhao

Source: http://www.cnblogs.com/ytaozhao this article copyright to the author and blog park a total, welcome to reprint, but without the author's consent must retain this paragraph of the statement, and inArticleThe original text connection is clearly displayed on the page. Otherwise, the legal liability is retained.