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和Firefox， BOTH 时，链接文字和锚文字会在我将鼠标悬停在它们上方时显示下划线。那么，为什么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>

Answer 2

如果您希望它在不需要使用类的情况下工作，您可以使用：

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

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

Answer 3

fiddle

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

从<a> element anchor text</a>删除下划线

3 个答案:

CSS

HTML