超链接的伪类听谁的呢？

作者：vkvi 来源：ITPOW（原创）日期：2013-7-3

当 CSS 本级指定了 a 样式，没有指定 a:hover，但上级指定了 a:hover，此时鼠标移上去，CSS 样式听谁的呢？

一种是响应本级的 a，即等同于本级的 a 的效果。
另一种是响应上级的 a:hover。

实现结论是响应上级的 a:hover（IE 6、Chrome 中测试均是如此）。

示例

<style type="text/css">
div a { color:#00f; text-decoration:underline; font-weight:normal; }
div a:hover { color:#f00; text-decoration:none; }
div span a { color:#0f0; text-decoration:underline; font-weight:bold; }
</style>

<div><a href="http://www.itpow.com/">div 中的</a></div>
<div><span><a href="http://www.itpow.com/">div 下 span 中的</a></span></div>
<div>鼠标移到第二行，应该是“红色、无下划线”，而不是“绿色、有下划线”。</div>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

但是：

关于加粗这个，我们可以发现，由于上级 a:hover 并没有指定 font-weight，所以它是找本级 a 的，并不会从上级 a 中找，所以是加粗的。

也就是说：

只会从上级对应的伪类继承，如果找不到，就从本级的 a 中找。

电邮：cftea@126.com