!important a bug and CSS priority under IE6.

In the absence of a DTD declaration, the IE6,IE7,IE8 parsing of!important is invalid under the same selector style (that is, the same curly brace).

Precedence of a CSS

Today, someone told me that CSS hack with!important to distinguish IE6, because IE6 does not support!important, yes, I used this method to write hack a long time ago, but later on the basic need. Originally I to his IE6 not support!important also have no objection, but just in the last few days just use this!important attribute to solve a problem of a style priority, and is support IE6, this is why? Does IE6 support!important?

First, let's look at the!important of this property:!important is used to promote style precedence, and we know that styles are prioritized.

Let's take a look at a few basic rules for CSS precedence:

1. ID selector (shaped like #id{}) > class selector (like. class{}) > tag selector (such as body{} or *{}), that is, ID selector, class selector, tag Selector, the ID selector has the highest priority, the label selector is the lowest;
2. The more specific the selector, the higher the priority, which is
   . ClassA. ClassB. classc{font-size:25px;
   . ClassB. classc{font-size:18px}
   . CLASSC {font-size:12px}
   ClassA CLASSB. CLASSC has the highest priority,. CLASSC has the lowest priority;
3. At the same level, the higher the last specified rule precedence, which is what we usually call the nearest principle; The attributes of the style of the tag in HTML are higher than the selector style in the CSS file;
4. Rules marked "!important" have the highest priority.

We can use!important to make the style the highest priority, for example:

CSS code:
#idA {font-size:20px}
. classa{font-size:12px;}

HTML code:
<div id= "IdA" class= "ClassA" > I want 20 pixel words </div>

We know that according to the rules above, we can see that the style of #ida{font-size:20px} will be quoted, so what if we want 12 pixel characters?

CSS code:
#idA {font-size:20px}
. classa{font-size:12px!important;

HTML code:
<div id= "IdA" class= "ClassA" > I want 12 pixel words </div>

So. classa{font-size:12px!important; This style is quoted.

This approach is covered by a high priority style in a lower-priority style and is useful when you want to quote a lower-priority style!

Two!important a bug under the IE6

Or look at this piece of code,

CSS code:
#idA {font-size:20px}
. classa{font-size:12px!important;

HTML code:
<div id= "IdA" class= "ClassA" > I want 12 pixel words </div>

You can test under IE6, the text is 12 pixels, that is, classa{font-size:12px!important; is quoted, which proves that IE6 is supporting!important. But CSS hack with!important to distinguish IE6, said IE6 not support!important what is going on?

Under the original IE6, under the same selector style (that is, inside the same curly brace) The!important is invalid , for example:

CSS code:
. classa{font-size:68px!important font-size:12px}

HTML code:
<div class= "ClassA" > I want a 12 pixel word </div>

Here under the IE6 is 12 pixel word, and other browsers are 68px words, of course, we change the style,!important put in the back, that is. classa{font-size:12px;font-size:68px!important; Then the IE6 and other browsers are also 68px words. That is, under the same selector style (that is, inside the same curly brace)!important is completely ignored by IE6.

============== the following August 1, 2009 update ==============

Yesterday on the Purple Mouse blog also saw the article about!important, said IE8 in the same selector style (that is, the same curly braces) under the!important parsing is the same as IE6, but I tested the situation is IE8 and IE6 is not the same, and left a speech, Today we discussed the issue, and indeed he wrote the code he wrote IE8 and IE6 to!important's parsing is the same. The comparison found that he did not have a DTD statement on the code, which is the sentence above the HTML code: "<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">", God, in the absence of a DTD declaration, the IE6,IE7,IE8 parsing of!important is invalid under the same selector style (that is, the same curly brace). and as long as there is a declaration document type whether it is HTML4,XHTML1.O, and HTML5 ("<! DOCTYPE html> "), except that IE6 has the bug mentioned above is normal.