从<A>元素锚文本中删除下划线

Question

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

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

但是，我不想将这种样式应用于作为页面锚点的<A>元素(例如具有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和火狐，和的链接文本和锚文本显示下划线时，我悬停在他们上面。那么，为什么anchor-text样式类不覆盖<A>标记的一般规则？

Answer 1

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

这是一个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>

Answer 2

如果您希望它不需要使用类就可以工作，可以使用：

a[name]:not([name='']) {
    text-decoration: none !important;
}

小提琴：http://jsfiddle.net/Et389/

Answer 3

小提琴

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