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

【问题标题】：How do I change the font color of a link using a css class?如何使用 css 类更改链接的字体颜色？
【发布时间】：2017-01-02 06:26:23
【问题描述】：

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

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>

【问题讨论】：

在您的 CSS 选择器中包含您的页面 ID
您在 CSS 中使用了 '#amp-wp-header，但在您的标记中 amp-wp-header 是一个类，因此请使用 .amp-wp-header。
类在 CSS 中以 (.) 开头，而 id 以 (#) 开头，您在上面的代码中混淆了这两者。
css link color styles best practice的可能重复
删除你的idid="#top"中的hash，id-attributes中不需要hash

标签： html css

【解决方案1】：

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

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

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

当你这样做时：

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

你是说：

将此颜色分配给a:active elements 下的所有.amp-wp-header
将此颜色分配给所有a:visited elements（此标记整个文档）

【讨论】：

【解决方案2】：

试试这个：

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
}

【讨论】：

最好不像header.amp-wp-header那样同时指定标签和类，因为如果他决定对标题使用不同的标签，代码就会中断元素，或在其他元素上使用该类。

【解决方案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;
    }

【讨论】：

但是您的.spl-for-link a 规则会将格式应用于.spl-for-link 中处于any 状态的链接。在第二条规则中，spl-for-link a:hover 将什么都不做，因为上面的规则中已经设置了颜色，a:focus 部分会将样式应用于文档中任何位置的 any 焦点链接.
你是否改变了 spl-for-link a:hover 的颜色，并且还赋予了颜色以覆盖 css 的重要性。

【解决方案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;}

【讨论】：

当然可以，但是我为什么要把它写成两个单独的规则呢？

【解决方案5】：

首先，您使用 # 表示 ID 而不是类。

使用这样的东西：

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

【讨论】：

但这将应用颜色，即使链接未激活、未访问、悬停或聚焦。
@torazaburo 你是对的，但我只是解释了它可以作为目标休息的方式应该相应地处理。

【解决方案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，以帮助您（和其他人）了解它的含义。

【讨论】：