CSS! Use of important

This articleArticleUse the latest ie10 and Firefox and chrome tests (as of 22:23:22, January 1, May 27, 2013)

CSS principles:

As we know, CSS writes in different places have different priorities. definitions in the. CSS file <attributes in the element style, but if they are used! Important, things will become different.

First, let's take a look at the following section.Code:

 <!  Doctype   Html  >  <  Html  >  <  Head  >  <  Meta   HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"  >  <  Title  > Test CSS! Important differences </  Title  >   </  Head  >   <  Style   Type  = "Text/CSS"  > . Testclass {color: Blue! Important ;} </  Style >  <  Body  >      <  Div   Class  = "Testclass"   Style  = "Color: red ;"  > Test important in CSS </  Div  >  </  Body  >  </  Html  > 

Although the element style has the testclass class definition, it is used in the CSS definition above! Important defined the highest priority, whether in ie6-10 or Firefox and chrome are consistent, show blue.

This also indicates that IE6 can be identified! Important, but this is a defect of ie6. IE6 cannot recognize the following styles:

 
. Testclass {color: Blue! Important; color: red ;}
 

In this way, the display in IE6 will be red.

Of course, you can also identify IE6 in the following ways:

. Testclass {

Color: Blue! Important;

}

. Testclass {

Color: red;

}

The above method also enables IE6 to be displayed in blue.

The above example is used! The CSS definition of important has the highest priority. There is only a small bug in IE6. Note that writing methods can be easily avoided.