为什么链接上的CSS选择器在悬停下划线时很棘手？

Question

以下是基于此HTML的两个示例.

<a href="#">
    <div class="foo">
        hello
        <span class="bar">world</span>
    </div>
</a>

在第一个中,我在悬停时使链接不加下划线,然后使链接的子部分加下划线,这样可以正常工作:

a {
    text-decoration:none;
}
a:hover {
    text-decoration: none;
}
a:hover .bar {
    text-decoration: underline;
}

在第二个中,我现在反转选择器,以便第二个单词应该是un -underlined.然而,现在发生了一些奇怪的事 尽管选择器看起来应该从第二个单词中删除下划线,但整个链接仍然带有下划线. < - (这是问题.为什么会发生这种情况？)

a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    text-decoration: none;
}

有人可以解释第二个例子中出了什么问题吗？使用Chrome进行检查显示其span.bar具有计算的样式text-decoration:none.

更新:解释如何解决问题的几个答案,这很好,除了这不是我的问题.我想知道的是为什么这种行为与粗体不同？例如,如果我用粗体尝试第二个例子,我会得到预期的结果:http://jsfiddle.net/3qPyX/4/

更新#2有人可以解释一下downvotes吗？

更新#3我为了清晰起见而进行了编辑,但如果您认为需要重新编写而不仅仅是低调,请花一点时间来改进问题.谢谢!

Answer 1

说明:

问题是某些属性(如文本修饰)被绘制到整个父内联元素,而其他属性 - 如字体样式(继承) - 被子属性覆盖.

仅举例说明:如果你将背景颜色设置为父元素,它将绘制父元素的背景......你必须为孩子设置另一种颜色才能将它放置(默认 - 透明 - 仍会显示父样式通过),但是如果在子元素上设置font-weight,它将应用于子元素内的文本并覆盖父设置.

您可以text-decoration在CSS Level 2和Level 3 Specifications中找到更多详细信息.

如果没有更改标记,您可以显示.bar为inline-block.

像这样:

a {
    text-decoration:none;
}
a:hover {
    text-decoration: underline;
}
a:hover .bar {
    display:inline-block;
}

并且内联块突破了父锚元素的内联/文本样式 =)然后您可以单独设置样式: