如何为多个链接使用伪类？答案

【问题标题】：How to use Pseudo classes for more than one link?如何为多个链接使用伪类？
【发布时间】：2021-02-24 06:11:46
【问题描述】：

当我想在多个链接中使用时如何使用伪类，例如：

a.youtube,a.google:link{ color: pink;}
a.youtube,a.google:visited{ color: green; }
a.youtube,a.google:hover{ color: red; }

<a class="youtube" href="https://www.youtube.com/" target="_blank">YOUTUBE</a>
<a class="google" href="https://www.google.com/" target="_blank">GOOGLE</a>

它不能正常工作。

【问题讨论】：

标签： html css css-selectors pseudo-element pseudo-class

【解决方案1】：

我认为你需要做的是在两个类上添加“:visited”/“:hover”，而不仅仅是“google”类。像这样：

a.youtube,a.google{
color: pink;
}

a.youtube:visited,a.google:visited{
  color: green;
}

a.youtube:hover,a.google:hover{
color: red;
}

另外，你不需要 ":link"

这是工作的JSFiddle

【讨论】：

【解决方案2】：

您可以使用一个类来归档它：

.social-link,
.social-link:link {
  color: pink;
}

.social-link:visited {
  color: green;
}

.social-link:hover {
  color: red;
}

<a class="youtube social-link" href="https://www.youtube.com/" target="_blank">YOUTUBE</a>
<a class="google social-link" href="https://www.google.com/" target="_blank">GOOGLE</a>

【讨论】：

即使我没有访问过它们，但它们都以绿色显示，但悬停工作正常。