Css 为什么我的主链接类（a:links和a:hover）覆盖了我新创建的唯一类（页脚链接a:links和页脚链接a:hover）

有点困惑，非常欣赏一些见解：

目前在我们的主要CSS文件中，我们将所有“常规”链接定义为：

`a:link {color:#da0000; text-decoration:none;}
a:visited {color: #CA0000;}
a:hover {color: #000000; text-decoration: underline;}
a:active {color:#da0000;}`

但是，由于我希望网站的各个部分都有不同颜色的链接，因此我定义了另一个仅在页脚中使用的类，如下所示：

`.footer_links {
        font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-size: 12px;
    color: #FFFFFF;}

.footer_links a:link {
    text-decoration: none;
    color: #FFFFFF;}

.footer_links a:visited {
    text-decoration: none;
    color: #FFFFFF;}

.footer_links a:hover {
    text-decoration: underline;
    color: #000000;}`

但是，当我启动页面时，主链接效果会覆盖我的.footer\u links类。这让我感到困惑，因为在每个页脚链接中，我都将类定义为class=“footer\u links”---因为链接是由一个单独的类定义的，所以我不确定为什么会覆盖它的效果

---

对此有什么想法吗？

您的规则是错误的，您正在为下一个结构设置一些规则

<div class="footer_links"><a> ...

---

如果我没弄错的话，您已经将页脚中的链接本身（）指定为类footer\u links。 对吧?

如果是这种情况，它将无法工作，因为您已在CSS中指定作为元素a的页脚链接的所有子元素都有行为

换成

.footer_links:visited{
 ...
}

.footer_links:hover{
 ...
}

---

当我看得对的时候，这应该可以解决你的问题。

看看Chrome开发者工具或Firefox的Firebug。这些选项允许您右键单击元素并检查它。在控制面板中，您将能够看到应用了哪些样式及其优先级。调试CSS的好方法！你能发布你的html吗？或者最好是一个JSFIDLE？你的逻辑是正确的，所以这应该是可行的。

a.footer_links {}
a.footer_links:hover {}

.footer_links:visited{
 ...
}

.footer_links:hover{
 ...
}