CSS 链接/悬停不工作

Question

我有一个链接应该显示白色表示“常规”和悬停，浅蓝色表示事件。

但是对于“常规”它显示紫色。为什么？

  .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; 
  }

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

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>

Answer 1

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

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

---

附加信息

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

Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.