任何锚元素都有白色文本

Question

我有一次考试，要求我将任何锚元素设为白色文本。 我已经尝试了我所知道的一切，但似乎无法接受。我没有找到任何帮助来尝试揭示它的含义，当我检查答案时，它只说我做了

<a>

颜色#FFFFFF

如有任何帮助，我们将不胜感激

html,
body {
  margin: 0;
  height: 100%;
  background-color: rgba(216, 27, 96, 0.6);
}

h2 {
  color: #FFCC00;
  font-family: 'Varela Round', sans-serif;
  font-size: 26px;
  font-weight: 100;
  text-align: center;
}

h4 {
  color: #FFCC00;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase
}

a {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

.wrapper {
  position: relative;
  margin: auto;
  padding: 0;
  max-width: 75vw;
}

.midground,
.foreground {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  margin: 15vh 0 0 15vw;
  padding: 0;
  width: 35vw;
  height: 59vh;
}

.midground {
  background-color: hsla(208, 79%, 51%, 0.4);
}

.foreground {
  background-color: hsla(45, 100%, 51%, 0.1);
}

Answer 1

问题可能是您的其他 CSS 代码覆盖了

color: #ffffff;

。这可以通过增加规则重要性来解决：

a {
  color: #fff !important;
}

---

此外，您还应该为特定状态设置样式。我在这里列出了最重要的状态：

:hover

当用户将鼠标光标悬停在链接上时适用。

a:hover {
  color: #efefef !important;
}

:active

这适用于用户单击链接时。

a:active {
  color: #eee !important;
}

:visited

这适用于用户访问关闭历史记录中的链接而不是普通样式后。

a:visited {
  color: #fff !important; /* Disabling the behavior by setting the same value as the main style */
}

---

注意： 如果您发现某些东西在没有

!important

的情况下也能正常工作，您可以将其删除。

Answer 2

不应仅使用

a

作为 css 规则的选择器，您应该使用

a:link

，并且您可能还想将其与

a:visited

结合使用，这样链接在用户首次访问后仍保持不变。所以完整的规则是：

a:link, a:visited {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

完整示例：

html,
body {
  margin: 0;
  height: 100%;
  background-color: rgba(216, 27, 96, 0.6);
}

a:link, a:visited {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

a:hover, a:active {
  text-decoration: none;
}

<a href="#">some link text</a>