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 - 下划线。然而，现在发生了一些奇怪的事整个链接仍然带有下划线，即使选择器看起来应该从第二个单词中删除下划线。 ＆lt; - （这是问题。为什么会发生这种情况？）

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

说明：

问题是某些属性（如text-decoration）被绘制到整个父内联元素，而其他属性 - 如字体样式（继承） - 被子属性覆盖。

只是为了说明： simmilarly，如果你设置一个父元素的背景颜色，它将绘制父元素的背景...你必须为一个孩子设置另一种颜色它结束（默认 - 透明 - 仍将显示父样式），但是如果你在子元素上设置font-weight，它将应用于子元素内的文本并覆盖父设置。

您可以在CSS Level 2和Level 3 Specifications的text-decoration媒体资源中找到更详细的内容。

一个简单的解决方案

无需更改标记，您只需将.bar显示为inline-block。

像这样：

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

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

Answer 2

执行text-decoration时，它会立即应用于整行。因此，a:hover .bar不会产生任何影响，因为下划线未在.bar中应用，而是在a上应用。

Answer 3

UPDATE！（正如@Cam建议的那样）：

您需要在单独的元素中添加文字部分：http://jsfiddle.net/3qPyX/5/

CSS：

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