CSS优先级的知识大家应该都比较了解了（如果不了解可以参看​​《详解CSS的优先权》​​）。但是，注意哦，这只是W3C的​​CSS2.1规范​​自己声称的。而事实上，确实有​​“极少数的浏览器”​​并不一定按照这个规则来办。这个“极少数浏览器”我就不点名了哈。

今天介绍一个最简单的。

div.colorful {color: red;}
div .colorful {color: green;}


按照​​CSS2.1规范​​里的规则，这两个CSS选择符应该是相同的优先级，应该以最后的为准。但是，在IE里并不是这样哦。

在IE（随便哪个版本）和FF（或Opera）里看这段代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb18030" /> <title>IE里关于CSS优先级的bug（一）</title> <style type="text/css"> div.colorful {color: red;} div .colorful {color: green;} </style> </head> <body> <div> <div class="colorful">这一段话则比较有意思，在标准浏览器里都是呈现绿色，而在IE（6、7、8）里，却呈现红色。因为IE（6、 7、8）居然认为“div.colorful”的优先级比“div .coloful”的优先级高，而按标准其实它们是一样优先级</div> </div> </body> </html>

提示：您可以修改代码之后再运行


看到了没？标准浏览器里是绿色，而IE里是红色哦。

同样的问题还会出现在：

.colorful div {color: red;}
div .colorful{color: green;}


IE认为，“.colorful div”比“div .colorful”的优先级高。自己去试试看。

但是呢，它会认为“.colorful div”和“div.colorful”的优先级一样。所以结果是

.class html = html.class > html .class

这个结论在IE5.5、IE6、IE7、IE8beta1里面都成立。

是不是有点晕了？哈哈～～实在记不住就算了吧～