html - 从 <A> 元素 anchor 文本中删除下划线

Question

我有一个样式表，为所有 <A> 提供特殊样式元素:

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

但是，我不想将此样式应用于 <A>用作页面 anchor 的元素(例如具有 name 属性的元素。)因此，我创建了另一个类来覆盖 <A> 的一般规则。元素:

.anchor-text {

}

.anchor-text a:hover {
    text-decoration: none;
}

然后我像这样应用它:

<a href = "">
    A Hyperlink (this should underline on hover)
</a>

<a class='anchor-text' name='foo'>
    Anchor text (this should NOT underline on hover)
</a>

但是，同时使用 Chrome 和 Firefox 时，BOTH 当我将鼠标悬停在链接文本和 anchor 文本上时，它们会显示下划线。那么，为什么是 anchor-text样式类未覆盖 <A> 的一般规则标签？

Answer 1

!important 不是问题所在。这是因为您的选择器是 .anchor-text a:hover 而不是 .anchor-text:hover

Here's a JSFiddle

CSS

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.anchor-text {

}

a.anchor-text:hover {
    text-decoration: none;
}

HTML

<a href = "">
    A Hyperlink (this should underline on hover)
</a>

<a class="anchor-text" name="foo" href="">
    Anchor text (this should NOT underline on hover)
</a>