CSS设置链接颜色

Question

我需要自定义这样的东西，我希望link1的颜色是橙色，link2和link3一开始是白色的，但是点击后链接是橙色的，其余的都是白色的，

它们的原始颜色是黑色，所以我使用 CSS

.naomi ul li a:link {
  color : #fff !important;
}
.naomi ul li a:hover,  .naomi ul li a:active, {
  color : brown;
 }

HTML 是：

<div class="naomi">
  <ul>
    <li ><a class="link1"></a></li>
     here
    <li ><a class="link2"></a></li>
    <li ><a class="link3"></a></li>
  </ul>
</div>

请帮我处理橙色部分。

Answer 1

要为已点击的链接着色，请使用伪类 :visited

在您的情况下，由于它不适用于所有链接，因此您需要将其设置为目标类。

请注意，此自定义 CSS 需要在 Wordpress 的 CSS 之后加载。您可能还需要调整规则 specificity 使其与 Wordpress 匹配，或者作为最后的手段，使用 !important

.naomi {
  background-color : gray;  /* added so we can see the white links */
}
.naomi .link1 {
  color : orange;
}
.naomi .link2,
.naomi .link3 {
  color : #fff;
}
.naomi .link2:visited,
.naomi .link3:visited {
  color : orange;
}
.naomi .link1:hover,
.naomi .link2:hover,
.naomi .link3:hover,
.naomi .link1:active,
.naomi .link2:active,
.naomi .link3:active {
  color : brown;
 }

<div class="naomi">
  <ul>
    <li ><a class="link1" href="#1">Link1</a> more text </li>
    <li ><a class="link2" href="#2">Link2</a> more text </li>
    <li ><a class="link3" href="#3">Link3</a> more text </li>
  </ul>
</div>

Answer 2

使用 :visited property

a:visited {color:orange}