Question

我正在尝试更改标题类中链接的字体颜色。我尝试使用下面的代码，但它影响了页面上的所有链接。我尝试了不同的安排，似乎无法弄清楚正确的方法。

CSS代码

#amp-wp-header a:active, a:visited {
    color:#ffffff;
}
a:hover, a:focus {
    color:#ffffff;
}

HTML代码

<header id="#top" class="amp-wp-header">
    <div>
    <a href="http://example.com">Title </a>
    </div>
</header>

Answer 1

试试这个：

header.amp-wp-header a:active, 
header.amp-wp-header a:visited, 
header.amp-wp-header a:hover,
header.amp-wp-header a:focus {
   color:#ffffff
}

Answer 2

如果您不关心特定的链接状态，只需执行以下操作：

.amp-wp-header a {
    color:#ffffff;
}

您的方法的问题是逗号分隔符用于指示单独的选择器。

当你这样做时：

.amp-wp-header a:active, a:visited {
    color:#ffffff;
}

你在说：

将此颜色分配给a:active elements

.amp-wp-header

将此颜色分配给所有a:visited elements（此标记整个文档）

Answer 3

试试这段代码，

<header id="#top" class="amp-wp-header">
    <div class="spl-for-link">
    <a href="http://example.com">
    Title </a>
    </div>
    </header>

    .spl-for-link a
    {
    color:#ffffff;

    }

    .spl-for-link a:hover,a:focus
    {
    color:#ffffff;
    }

Answer 4

#amp-wp-header a:active, #amp-wp-header a:visited{color:#ffffff;}
#amp-wp-header a:hover,#amp-wp-header a:focus{color:#ffffff;}

Answer 5

首先，您使用的是＃，而ID不适用于班级。

使用类似的东西：

.amp-wp-header > div a{
color: #fff;
}

Answer 6

但它影响了网页上的所有链接。

#amp-wp-header a:active,a:visited{color:#ffffff;}a:hover,a:focus{color:#ffffff;}

如果您重新格式化（并将#更改为.以指定一个类），那么

.amp-wp-header a:active,a:visited{color:#ffffff;}
a:hover,a:focus{color:#ffffff;}

您可以清楚地看到，在第二条规则中，将颜色应用于所有悬停或重点链接。

换句话说，第一个{color:#ffffff}终止规则。以a:hover开头的以下部分被解释为一个全新的单独规则。它不受.amp-wp-header的影响只是因为它碰巧在同一条线上。

因此，您可能认为解决方案是将CSS重写为一条规则，以便更高级别的选择器适用于所有伪类状态：

.amp-wp-header a:active, a:visited, a:hover, a:focus {color: #ffffff;}

但是，这也不起作用，因为.amp-wp-header仅适用于a:active。 “选择器组”的每个成员（有时称为“选择器列表”），用逗号分隔的选择器列表完全独立。换句话说，以上完全等同于

.amp-wp-header a:active {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:focus {color: #ffffff;}

会将样式应用于所有已访问，悬停或有针对性的链接，而不仅仅是.amp-wp-header内的链接。因此，您需要将其写为

.amp-wp-header a:active  {color:#ffffff;}
.amp-wp-header a:visited {color:#ffffff;}
.amp-wp-header a:hover   {color:#ffffff;}
.amp-wp-header a:focus   {color:#ffffff;}

等效的是

.amp-wp-header a:active, 
.amp-wp-header a:visited,
.amp-wp-header a:hover,
.amp-wp-header a:focus {
  color: #ffffff;
}

请注意，在将来的浏览器中，您可以使用:matches，如下所示：

.amp-wp-header a:matches(:active, :visited, :hover, :focus) {
  color: #ffffff;
}

有关详细信息，请参阅MDN page。有关兼容性，请参阅this chart。目前，您需要使用供应商前缀版本，例如-webkit-any或-moz-any，这会降低其吸引力。

除了理解选择器和选择器组如何工作之外，这里的一个教训是仔细地格式化和缩进CSS，以帮助您（和其他人）看到它的含义。

如何使用css类更改链接的字体颜色？

6 个答案: