IE 6 在解释 a 样式问题上的错误

作者：vkvi 来源：ITPOW（原创）日期：2010-2-14

CSS 文件

a:hover
{
text-decoration:underline;
}

.mp a
{
text-decoration:none;
}

HTML 文件

<p class="mp"><a href="http://www.itpow.com/">cftea</a></p>

现象

把鼠标移到文字 cftea 上，在 Firefox、Chrome 中，均没有超链接，而在 IE 6 中却有超链接。

解释

IE 6 对这种解释是错误的。

CSS 有个优先级，最高的是内联，其次是通过 id 指定的，再次是通过 class 指定的，最后是通过标签名称指定的。具体不再此处展开讨论。

我们看到 a:hover，是通过标签名称指定的，其优先级最低，而 .mp a 是通过 class 指定的，虽然后面也有个标签，但是前面的 .mp 已经决定了它要比 a:hover 高一个数量级。所以 .mp a 的优先级高于 a:hover。这一点 IE 也认同。

问题是 .mp a 没有指明伪类 hover，而 a:hover 指明了伪类 hover，正因为存在 a:hover，IE 错误地认为 .mp a 没有包含 .mp a:hover，造成鼠标移上去时有超链接。

如果不存在 a:hover，那么鼠标移上去时，IE 才使用 .mp a 的样式。