CSS 链接/悬停不工作答案

【问题标题】：CSS Link/Hover Not WorkingCSS 链接/悬停不工作
【发布时间】：2015-09-30 23:59:13
【问题描述】：

我有一个链接，“常规”和悬停时应显示白色，活动时应显示浅蓝色。

但“常规”显示为紫色。为什么？

  .button {
  text-decoration:none; 
  color: red; 
  background: purple; 
  }
  .button:hover {
  color: white; 
  background: purple; 
  }
  .button:active {
  color: red; 
  background: purple;
  }
  .button:visited {
  color: purple; 
  background: purple; 
  }

&lt;a href="example.com" style="text-decoration:none" class="button"&gt;text&lt;/a&gt;

HTML：

<a href="example.com" style="text-decoration:none" class="button">text</a>

CSS：

<style>
  .button {
  text-decoration:none; 
  color: red; 
  background: purple; 
  }
  .button:hover {
  color: white; 
  background: purple; 
  }
  .button:active {
  color: red; 
  background: purple;
  }
  .button:visited {
  color: purple; 
  background: purple; 
  }
</style>

【问题讨论】：

我无法重现您的问题，请查看此链接jsfiddle.net/rfxb72fc
您需要显示一些适用的 HTML 标记。据我所知，没有看到一些标记，您错误地使用了 <button> 标记，但使用 .button class 选择器对其进行样式设置，这显然是行不通的。
如果这是在链接 <a> 上，因为 Matt 认为您需要这么说，因为 :visited 很重要。
@matt rohland，我已经更新了相关代码。
作为建议，稍微清理一下 CSS 可能会有所帮助。除非还有一些外部样式也在起作用，否则这些重复的定义是不必要的。例如：jsfiddle.net/jnfnpLgj/1

标签： css button hover

【解决方案1】：

如果 .button 是 <A> 标签，正如您的 CSS 建议的那样，您可能希望为“已访问”伪类提供样式。

见：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited

其他信息

CSS 的级联特性意味着样式的顺序确实很重要。
访问 URL 后，将应用 ":visited" 样式。
当您将鼠标悬停在链接上时，这些样式也会应用。
它们应用的优先级取决于它们在样式表中的顺序。

注意：如果你想让 ":hover" 占主导地位（即使在访问发生后，也应该在下面定义:visited。

【讨论】：

似乎 :visited 覆盖了所有其他值。 @MattRohland
CSS 的级联特性意味着顺序很重要。一旦一个 URL 被访问， ":visited" 样式就会应用。当您将鼠标悬停在链接上时，这些样式也将应用。它们应用的顺序将取决于样式表中的顺序。如果你想让 ":hover" 占主导地位，它的样式应该定义在 ":visited" 下面。
所以我的猜测是，访问应该是第一个？
告诉它是否是正确的询问位置：我希望在访问后显示不同的文本。在这种情况下，“订阅！”。
您可以将第三条评论放在您的答案中，然后我可能会将其标记为正确。