Question

用于链接的文本保持相同的颜色（紫色），即使我从未将其设置为该颜色并希望它是白色。

我尝试添加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>

文字要全白，没有下划线

Answer 1

a标签具有其自己的显式样式，因此您需要直接覆盖它们。只需在父nav标签上设置颜色就不会更改它们，您需要自行设置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>

Answer 2

您需要为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>

Answer 3

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

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

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

Answer 4

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

要使其出现，只需将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;
}

链接颜色不变

4 个答案: