.class:hover 在 Firefox 中不起作用？

所以我有一些html：

<a class='clicktext'>...read more!</a>

我想给它一个 :hover 动画，如下所示：

.clicktext{
}
.clicktext:hover{
    text-decoration:underline;
}
.clicktext:active{
    text-decoration:none;
}

可以说，它在 Mozilla Firefox 5 中不起作用，尽管它在 Chrome 和 Safari 中运行得很好。但是，如果我将其更改为

a{
}
a:hover{
    text-decoration:underline;
}
a:active{
    text-decoration:none;
}

它在 Mozilla Firefox 5 中运行得非常好！我还没有在网上找到任何与此相关的信息。

当然，我可以更改样式以应用于 a 而不是 .clicktext。这样做的问题是，它会破坏我的约定，即（尽可能）将所有样式应用于类而不是标签名称。毕竟，我还有许多其他标签，我不希望出现悬停时下划线的内容。

有没有人遇到过这个问题，并且也许找到了一个不错的解决方案？

编辑：这些也不起作用

.clicktext a:hover{...}
a .clicktext:hover{...}

我在使用 Firefox 时遇到了此类问题，并通过将标签名称添加到类名称来解决它：

例如我有这个在 Chrome 中工作但在 Firefox 中不起作用：

.content .sidebar:hover{
    background-color: red;
}

并通过使其更具体来修复它，如下所示：

div.content div.sidebar:hover{
    background-color: red;
}