css - 为什么链接上的 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;
}

在第二个中，我现在反转选择器，以便第二个单词不加下划线。然而，现在奇怪的事情发生了。尽管选择器似乎应该从第二个单词中删除下划线，但整个链接仍然带有下划线。 <--（这是问题。为什么会发生这种情况？）

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/

score 10 · Accepted Answer

解释：

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

仅用于说明：同样，如果您为父元素设置背景颜色，它将绘制父元素的背景......并且您必须为子元素设置另一种颜色以将其覆盖（默认 - 透明 - 仍将显示父样式通过），但是如果您在子元素上设置字体粗细，它将应用于子元素内的文本并覆盖父设置。

您可以在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;
}

并且内联块打破了父锚元素的内联/文本样式=）然后您可以独立设置它的样式：

score 2 · Accepted Answer

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

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

CSS：

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

score 2 · Accepted Answer

当您这样做时，text-decoration它会立即应用于整条线。所以a:hover .bar 不会造成任何影响，因为下划线没有应用在中，.bar而是应用在a.