Question

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

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

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

但是，因为我希望网站的各个部分都有不同的彩色链接，所以我定义了另一个只在FOOTER中使用的类，如下所示：

`.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_links类。这让我感到困惑，因为在每个页脚链接中，我将类定义为，class =“footer_links”---因为链接是由一个单独的类定义的，我不确定为什么它的效果被覆盖。

对此有何想法？

Answer 1

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

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

如果您有像

这样的HTML

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

你必须看起来像

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

Answer 2

如果我理解你的话，你已经在你的页脚中给了链接本身（）footer_links。正确？

如果是这种情况则无法使用，因为您已在CSS中指定作为元素a的footer_links的所有子节点都有行为。

将其更改为

.footer_links:visited{
 ...
}

.footer_links:hover{
 ...
}

当我看到它时，那应该可以解决你的问题。

为什么我的主链接类（a：links＆amp; a：hover）覆盖我新创建的唯一类（#footer_links a：links，＃footer_links a：hover）

2 个答案: