Parse and verify IE6 and earlier versions '! Important 'bug

I have discussed with experts in a front-end technical group '! Whether important is an IE bug or how to design an example for verification. At that time, the example I gave was to reference the example of the online predecessors:

# Test {
Color : Red! Important ; /* IE7, FF, op, and so on display red text */
Color : Green ; /* IE6 displays green text */
}

The reason for rejection was that this example was unconvincing. Later I thought about it. Indeed, this example can only be regarded as a special case. It is a superficial phenomenon. to persuade others to believe your point of view, you must express the essence. I have recently studied CSS particularity, inheritance, cascade, and other technologies again. Now I should take it further. At least I convinced myself --! Important is indeed an IE bug!

To better illustrate the substantive principles, it is necessary to really understand the importance of CSS (! Important ). Of course, to be clear, you must understand the particularity, inheritance, and hierarchy, but these are not the scope described in this article.

In css priority rules ,! Important has the highest priority, and its weight is higher than that of the inline style. Colleagues who know the particularity of CSS should be very clear that inline styles have the highest priority (priority is, and Id selector priority is second:,), but come across! When important is used, the inline style is slightly inferior (this is assumed that no inline style is set here! Important ). For example:

Span { Color : Gray! Important ; }

The above style applies to the following structure:

< Span Style = "Color: Blue ;" > Why is the color displayed? </ Span >

After verification, I will display the text 'Why is the color? 'Will be displayed as gray in the browser (including IE6 ). This result indicates that all browsers (including IE6) can be parsed normally! Important.

However, when we slightly change the style sheet:

Span {
Color : Gray! Important ; /* IE6 will not display text as gray) */
Color : Red ;
}

After the style sheet is applied, why is the text color displayed ?? After verification, IE7, ff, and OP are still displayed as gray, while IE6 is displayed as blue (color: Blue )!

Why is this result? Bug !!

Is it a bug? Let me modify the style sheet:

Span {
Color : Gray! Important ; /* IE6 will still not parse this rule */
Padding : 8px ;
Line-height : 25px ;
Vertical-align : Middle ;
Color : Red ;
}

I add several rules randomly between two color attributes. The results are exactly the same as those without those rules, that is, IE6 displays the text as blue (color: Blue ).

Well, if the above changes do not explain the substantive issues, I modified the style sheet again:

Span {
Color : Gray! Important ; /* Hey, IE6 is finally 'seeing '! Important */
}
Span {
Color : Red ;
}

If no! Important, according to the cascade rules, color: Red will overwrite color: Gray, and inline style color: Blue will overwrite color: Red -- but with it! After important, everything must be changed. The browser (including IE6) displays the text in gray (color: Gray! Important )!

 

To sum up ,! Important can be parsed by IE6, but cannot be parsed when it comes to IE6! Important is used to group two identical rules into the same rule group (yes! Important rules are in front of each other ).

Reference: CSS authoritative guide: the third edition Eric A. Meyer