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

下面是两个基于此HTML的示例

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

---

在第二个示例中，我现在反转选择器，以便第二个单词应带有下划线。然而，现在发生了一些奇怪的事情尽管选择器似乎应该从第二个单词中删除下划线，但整个链接仍保持下划线。当您执行

文本装饰时，它将立即应用于整行。因此，
a:hover.bar
不会产生任何效果，因为下划线不是在
.bar
中应用的，而是在
a
上应用的

规范如下：
当您进行
文本装饰时，它会立即应用于整行。因此，
a:hover.bar
不会产生任何效果，因为下划线不是在
.bar
中应用的，而是在
a
上应用的

以下是规范：
更新！（正如@Cam建议的那样）：

您需要在文本的各个部分添加单独的元素：

CSS：

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

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

您需要在文本的各个部分添加单独的元素：

CSS：

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

说明：
问题是一些属性（如）被绘制到整个父内联元素，而其他属性（如字体样式（继承）被子属性覆盖

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

您可以在和中找到有关
文本装饰
属性的更多详细信息


简单的解决办法
在不更改标记的情况下，您可以将
.bar
显示为
内联块

像这样：

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

内联块脱离父锚点元素=）的内联/文本样式，然后您可以独立设置其样式：

说明：
问题是一些属性（如）被绘制到整个父内联元素，而其他属性（如字体样式（继承）被子属性覆盖

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

您可以在和中找到有关
文本装饰
属性的更多详细信息


简单的解决办法
在不更改标记的情况下，您可以将
.bar
显示为
内联块

像这样：

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

内联块脱离父锚点元素=）的内联/文本样式，然后您可以独立设置其样式：

的确显示不带
a
元素或
：hover
行为的效果。如果希望仅在锚定的第一部分下划线，则应为该部分创建单独的跨距：。事实上，父母总是在孩子身后划一条线。显示不带
a
元素或
：hover
行为的效果。如果希望仅在锚定的第一部分下划线，则应为该部分创建单独的跨距：。家长总是在孩子后面画线。你在
a
上画下划线，所以把它去掉
。
没有任何效果，因为你没有在酒吧上画任何东西，只是为了让更多的人不到这里来对
里面的
大喊大叫。不知道donald的问题是什么，当他被错误地否决投票时，他突然出现，给人们带来了悲痛，因为这个问题一点也不清楚。这不是一个关于
：hover
选择器的问题，而是一个关于文本装饰的问题。可以找到类似的问题。和@Seer，我看不出有什么不清楚的地方-它问为什么
文本装饰：孩子身上的none
似乎不会影响家长的文本装饰。你正在将下划线应用到
a
上，所以去掉它
。bar
将没有效果，因为你没有对bar应用任何东西，只是为了让更多的人不会在这里大喊大叫不知道donald的问题是什么，当他被错误地否决投票时，他只是让人们感到悲伤，因为这个问题一点也不清楚。这不是关于
：悬停
选择器的问题，而是关于文本装饰的问题。可以找到类似的问题。还有@Seer，我看不出有什么不清楚的地方——它会问为什么孩子身上的
文本装饰：无
似乎不会影响家长的文本装饰。删除。条形图文本装饰：无。你有答案了。一定要把问题通读一遍。嗯，但是他希望第一个单词在悬停处划线，第二个单词在正常状态下划线，不是吗@罗伯特·马丁？不，他想把它倒过来。你知道答案了，把它和你的黄金戒指修好+1删除。条形图文本装饰：为无。你有答案了。一定要把问题通读一遍。嗯，但是他希望第一个单词在悬停处划线，第二个单词在正常状态下划线，不是吗@罗伯特·马丁？不，他想把它倒过来。你知道答案了，把它和你的黄金戒指修好+1我认为“打破样式”是理解为什么会发生这种情况的关键，但我仍然没有真正理解，因为我认为下划线是直接应用于文本的东西，如我的示例中的粗体。有什么区别