CSS设置链接颜色

Question

我需要自定义这样的东西，我希望link1有橙色，link2＆amp; 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

使用：访问过的房产

a:visited {color:orange}