html用按钮控制字体换色不用link,如何更改使用css类的链接的字体颜色？

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

#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，以帮助您(和其他人)了解它的含义。