关于界面的价值观与方法论

IE里关于CSS的优先级的bug(三)

29June2008
.orange_link .orange_link .orange_link a { color: orange; }
.orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
.orange_link a { color: orange;}

根据上次的结论在IE6里,“a:hover”的优先级比“.orange_link a”高。说起来,a:hover还真是终极霸王的感觉~哈。

但是呢,很好玩的事情来咯。在IE6里面,“.orange_link .orange_link a”的优先级和“a:hover”一样高。请在IE6里面看下面的代码:


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

可以看到,“.green_link .green_link a”在“a:hover”后面,于是就生效了,而“.orange_link .orange_link a”在前面,就没生效。所以,它们是一个优先级的哦。

好了,最诡异的来了。我们试试看“.orange_link .orange_link .orange_link a”和“a:hover”的优先级。


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

结论是:IE6里,“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高
以上的结论在:visited和:active也成立,但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。

最后再补充一点就是,IE6中,“a#blue_link”或是“#blue_link”的优先级比a:hover要高。这点上它没有出错。

所以,在IE6里面关于链接伪类的bug真的很疯狂~~大家一定要小心。为了避免这种优先级的bug,在写CSS的时候,尽量用显式的:hover来定义样式,不要指望只用.class a就能改变a:hover。

总结一下IE6里链接伪类(:hover,:visited,:active)的优先级的bug:

a#id  或 #id
    大于
.class .class .class a
    大于
a:hover
    等于
.class .class a
    大于
.class a

  1. 流放之忆:

    同一元素两个class,用.className1.className2的写法对.className1进行覆写,IE 6里识别有问题,这个有没有心得?

    这两天被这个问题折腾坏了。

  2. 小麦:

    双class在IE6里支持得不完整。事实上,.style1.style2,在IE6里只被识别为.style2。

    换句话说,这个选择符的样式会应用在class=”style2″上面,虽然按照标准它应该只应用在class=”style1 style2″上。同样的,.style1.style2的优先级与.style1一样高。

  3. 辉舞世间:

    感谢把自己的心得写出来和大家分享!