IE6 的 !important
- 蓝精灵 - 幸福收藏夹从开始要学解决 CSS 兼容问题时候起,就经常听 important 有各种坏处,不要使用,并且 IE6 下不能生效. 所以一下没有用 !important. 直到昨天给新人讲 CSS 的时候,这个问题才被提起. 早上旁边的小姑娘又问起,我说写个测试. 由此我们可以得出的结论是:IE6 下是可以使用 !important 的,但相同选择器内如果 !important 不是写在最后,则 !important 失效.
从开始要学解决 CSS 兼容问题时候起,就经常听 important 有各种坏处,不要使用,并且 IE6 下不能生效。所以一下没有用 !important。直到昨天给新人讲 CSS 的时候,这个问题才被提起。早上旁边的小姑娘又问起,我说写个测试。结果如下(IE6截图):
示例代码如下:
<!doctype html> <html> <head> <style> .first{color:#f30!important;} .second{color:#f30!important;color:blue;} .third{color:green;color:#888!important;} .forth{color:#f60!important;} .fifth{color:#eee;} .sixth{color:#f60;} .seventh{color:#c30!important;} .eighth{color:#ff0!important;} .eighth{color:blue!important;} </style> </head> <body> <p class="first" style="color:green">.first{color:#f30!important;}</p> <p class="second" style="color:green">.second{color:#f30!important;color:#blue;}</p> <p class="third" style="color:green">.third{color:#green;color:#888!important;}</p> <p class="forth fifth" style="color:green"> .forth{color:#f60!important;}<br /> .fifth{color:#eee;} </p> <p class="sixth seventh" style="color:green"> .sixth{color:#f60;}<br /> .seventh{color:#c30!important;} </p> <p class="eighth" style="color:green"> .eighth{color:#ff0!important;}<br /> .eighth{color:blue!important;} </p> </body> </html>
由此我们可以得出的结论是:IE6 下是可以使用 !important 的,但相同选择器内如果 !important 不是写在最后,则 !important 失效。相同元素的不同选择器下,单独定义同一个属性的值,不管选择器的顺序如何,!important 仍然会生效。
多谢 @afc163 同学昨天课堂上做的分析。