【分享】IE6 中 A 标签 hover 伪类特殊性过高的问题

WebAdvocate 2010-07-01 11:27:17

加精

昨天在【分享】<a>标签的伪类书写顺序问题中说到，A 标签的’:link’，’:visited’，’:hover’，’:actived’伪类的声明有顺序的限制，如果顺序不正确可能导致某些伪类的声明无效（其实是被其他的覆盖掉了）。但是，在 IE6 中声明顺序即使不正确， ‘:hover’ 会依然有效，这是为什么呢？

昨天也有童鞋已经说出了答案：它的根本原因是特殊性计算的问题。今天就这个问题，做一个详细点儿的说明。

各位看官注意，精彩的地方到了。

先做个简要的名词解释 :
1. IE6(Q)代表的是IE6 的 Quirks Mode;
2. IE6(S)代表的是IE6 的 Standards Modes;

为说明方便，排除其它因素对选择器优先级的影响，我们仅关注选择器的特殊性和出现的顺序。

这里，我们讨论IE6(S)(Q)/IE7(Q)/IE8(Q)下 A 元素 “:hover” 的bug，其中，IE6 中伪类声明顺序不正确但是 ‘:hover’ 依然有效就是此类问题的一个表现。

问题来了！在IE6(S)(Q)/IE7(Q)/IE8(Q)下，“A:hover”的优先级是否真的无法超越？请看如下代码：

<style type="text/css">

a{background-color:#d4d4d4;font-size:14px;font-weight:bold;}

a:hover{background-color:red;} /* [0,0,1,1] */

div.div1 a{background-color:yellow;} /* [0,0,1,2] */

</style>



<div class="div1">

 <a class="a1" href="#">A:hover bug</a>

</div>

观察代码，选择器“a:hover”的特殊性为“[0,0,1,1]”，选择器“div.div1 a”的特殊性为“[0,0,1,2]”，很明显选择器“div.div1 a”中的背景色（yellow）应该覆盖选择器“a:hover”中的背景色（red），然而从上表得到的测试结果来看，在 IE6(S)(Q)/IE7(Q)/IE8(Q)下却无法覆盖。难道真如传说中所言IE6(S)(Q)/IE7(Q)/IE8(Q)下“A:hover” 无法超越！

修改选择器“div.div1 a”为“.div1 a.a1”，如下：

.div1 a.a1{background-color:yellow;} /* [0,0,2,1] */

此时，选择器“.div1 a.a1”的特殊性为“[0,0,2,1]”。经过在各浏览器中的测试结果表明，IE6(S)(Q)/IE7(Q)/IE8(Q) 中的 “:hover” 终于被覆盖。这次竟然超越了！

继续，修改选择器“.div1 a.a1”为“div.div1 .a1”，如下：

div.div1 .a1{background-color:yellow;} /* [0,0,2,1] */

此时，选择器“div.div1 .a1”的特殊性也为“[0,0,2,1]”。经过测试，IE6(S) (Q)/IE7(Q)/IE8(Q)下的 “:hover” 竟然起死回生了。竟然无法超越，没道理啊，明明特殊性的值更上面测试中的值的相同，Why :？IE总是给人“惊喜”，好无奈！！

可见，只是在[0,0,c,d]上大于 a:hover 样式的特殊性，并不能保证能够超越 a:hover 的特殊性。

再次调整代码，给div设置一个ID，代码调整后如下：

<style type="text/css">

a{background-color:#d4d4d4;font-size:14px;font-weight:bold;}

a:hover{background-color:red;} /* [0,0,1,1] */

#divID .a1{background-color:yellow;} /* [0,1,1,0] */

</style>



<div id="divID">

 <a class="a1" href="#">A:hover bug</a>

</div>

此时，选择器“#divID .a1”的特殊性为“[0,1,1,0]”。经测试，IE6(S)(Q)/IE7(Q) /IE8(Q) 终于顶不住了，”:hover”回归正常。

经反复测试，我们得出结论：IE6(S) (Q)/IE7(Q)/IE8(Q)“*:hover”的特殊性没有特定的规律可循，只有特殊性b的值大于选择器“*:hover”特殊性b的值时（当然 a值要相等），IE6(S) (Q)/IE7(Q)/IE8(Q)下“A:hover”优先级才能保证被超越！

总之，想要在 IE6(S) (Q)/IE7(Q)/IE8(Q) 得到正常的 ‘:hover’，有一个比较保险的办法：选择器特殊性b的值要大于选择器“*:hover”特殊性b的值时（当然a值要相等）

希望从此以后，各位童鞋可以轻松的收拾在 IE 中不大听话的 ‘a:hover’。

...全文

2566 37 打赏收藏转发到动态举报

写回复

用AI写文章

37 条回复

切换为时间正序

请发表友善的回复…

发表回复

a292485751 2010-08-11

打赏
举报

不太明白

DavisYu 2010-07-06

打赏
举报

好文章

xiuyouxu 2010-07-05

打赏
举报

学习，新手

bruce_woo 2010-07-04

打赏
举报

很好，ls好搞笑~~

glxasad 2010-07-04

打赏
举报

什么都不会，只想到这里求一个注册机

lwlongyan 2010-07-03

打赏
举报

学习学习

zlcj1 2010-07-03

打赏
举报

没看见什么非法的啊

shadowwayne 2010-07-02

打赏
举报

2. 当选择器没有明确指向A标签，特殊性b的值要大于选择器“*:hover”特殊性b的值时（当然a值要相等）

WebAdvocate 2010-07-02

打赏
举报

[Quote=引用 22 楼 shadowwayne 的回复:]

HTML code
<style type="text/css">
a{background-color:#d4d4d4;font-size:14px;font-weight:bold;}
a:hover{background-color:red;} /* [0,0,1,1] */
.div1 .div2 .a1{background-color:yellow;} /* [0,0,3,0] *……
[/Quote]这个在IE中也没问题吧？

shadowwayne 2010-07-02

打赏
举报

<style type="text/css">

a{background-color:#d4d4d4;font-size:14px;font-weight:bold;}

a:hover{background-color:red;} /* [0,0,1,1] */

.div1 .div2 .a1{background-color:yellow;} /* [0,0,3,0] */

</style>

</head>

<body>

<div class="div1">

<div class="div2">

  <a class="a1" href="#">A:hover bug</a>

</div>

</div>			

</body>

LZ 试试这个

qq1013921985 2010-07-02

打赏
举报

楼主打字速度很快啊转眼间3篇大作完成

m2009h 2010-07-02

打赏
举报

相当好啊。谢谢

tizll521 2010-07-02

打赏
举报

学习了以前还真没注意过

BadPattern 2010-07-02

打赏
举报

每天回复即可获得10分可用分

tingsking18 2010-07-02

打赏
举报

强烈支持
接分

mochimo 2010-07-02

打赏
举报

[Quote=引用 24 楼 shadowwayne 的回复:]

2. 当选择器没有明确指向A标签，特殊性b的值要大于选择器“*:hover”特殊性b的值时（当然a值要相等）
[/Quote]

24楼很牛B啊！！！求教CSS.

xk029 2010-07-02

打赏
举报

WebAdvocate 2010-07-02

打赏
举报

[Quote=引用 24 楼 shadowwayne 的回复:]

2. 当选择器没有明确指向A标签，特殊性b的值要大于选择器“*:hover”特殊性b的值时（当然a值要相等）
[/Quote]楼上的问题发现的很好，非常感谢楼上同学的认真的精神，对不住各位了，已经更新了帖子。

IE中还真没什么规律可找，郁闷了。。。。

各位有没有找到，不用ID选择器时，IE中可以覆盖 a:hover 的规律的呢？

再次拜谢楼上。

WebAdvocate 2010-07-01