Question

我的网页上有这个CSS：

html.light .auth .authInput .authLink {
  color: #007fff;
}

和这个HTML：

<a class="authLink" .... ></a>

我注意到在一个地方链接是蓝色的，在另一个地方链接是紫色的。

有人能告诉我为什么它的颜色不同吗？

Answer 1

因为紫色代表visited。要使其消失，请添加:visited伪选择器，如下所示：

html.light .auth .authInput .authLink:visited {
  color: #007fff;
}

即使您访问过该链接，也可以确保链接颜色相同。通过访问，我的意思是点击它。

一般来说，你想要涵盖链接的整个“爱恨”：

html.light .auth .authInput .authLink:link {
  color: #007fff;
}

html.light .auth .authInput .authLink:visited {
  color: #007fff;
}

html.light .auth .authInput .authLink:hover {
  // Some color
}

html.light .auth .authInput .authLink:active {
  // Some color
}

“爱恨”基本上意味着您应该按照正确的顺序定义:link，:visited，:hover和:active。它只是一个帮助，用于提醒指定它们的顺序。（LVHA）

Answer 2

html.light .auth .authInput .authLink:link {
   color: #007fff;
}
html.light .auth .authInput .authLink:visited {
   color: #007fff;
}

第一个CSS表示未访问的链接应该是某种颜色。

第二个CSS表示访问过的链接应该是某种颜色（在这种情况下，与未访问的链接颜色相同）。

如果您需要：悬停（当鼠标悬停链接时）或：激活（当鼠标点击链接时）状态等等...

...点击此处：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

我会为所有州提供解决方案（正如我上面的评论所做的那样），但最好知道为什么某些事情在某些方面表现，而不仅仅是复制因为你将来不可避免地会再次遇到这个问题，所以要回答答案。

例如，选择器需要按特定顺序排列，通过复制和粘贴代码，您可能会尝试自己操作它或将其重新用于其他内容，然后您会遇到一些故障代码，因为你把悬停状态置于链接状态之前，或者类似的东西，你会想知道发生了什么，而如果你理解它是从你开始的，那就永远不会有那个问题。 =）

为什么我的链接文本有不同的颜色？

2 个答案: