链接颜色不变

时间:2019-06-11 20:42:51

标签: html css

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

我尝试添加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 个答案:

答案 0 :(得分:2)

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>

答案 1 :(得分: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>

答案 2 :(得分:1)

是的,您需要直接定位链接,如下所示:

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

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

答案 3 :(得分: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;
}