0

链接的文本保持相同的颜色（紫色），即使我从来没有把它做成那种颜色并希望它是白色的。

我尝试添加 nav:link、nav:active 等，但它只是改回默认值，没有 CSS

nav{
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  word-spacing: 300px;
  color: #edf5e1;
  background-color:  #05386b;
  text-decoration: none;
}
<nav>
  <a href="">Home</a>
  <a href="">Projects</a>
  <a href="">About</a>
  <a href="">Contact</a>
</nav>

使文本全白，没有下划线

4

4 回答 4

2

a 标签有自己的显式样式，因此您需要直接覆盖它们。只是在父导航标签上设置颜色不会改变它们，您需要自己设置 a 标签的样式。

nav a{
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  word-spacing: 300px;
  color: #edf5e1;
  background-color:  #05386b;
  text-decoration: none;
}
<nav>
  <a href="">Home</a>
  <a href="">Projects</a>
  <a href="">About</a>
  <a href="">Contact</a>
</nav>

于 2019-06-11T20:46:38.990 回答
1

您需要应用样式nav a而不是nav. a具有浏览器默认使用的特定样式。

nav {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  word-spacing: 300px;
  color: yellow;
  background-color: #05386b;
}

nav a {
  color: #fff;
  text-decoration: none;
}
<nav>
  <a href="">Home</a>
  <a href="">Projects</a>
  <a href="">About</a>
  <a href="">Contact</a>
</nav>

于 2019-06-11T20:46:41.493 回答
1

是的，您需要直接定位链接，如下所示：

nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
    color: #FFFFFF;
    text-decoration: none;
}

您可能不需要此处显示的所有状态，但这将使链接始终显示为白色且没有下划线。

于 2019-06-11T20:49:24.543 回答
0

实际浏览器默认链接颜色为蓝色。

要让它出现，只需将您的 CSS 选择器nav替换nav a为设置锚标记而不是nav元素上的所有属性。

nav a {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  word-spacing: 300px;
  color: #edf5e1;
  background-color:  #05386b;
  text-decoration: none;
}
于 2019-06-11T20:50:57.340 回答