Ссылка принимает стиль другой ссылки

Question

Lo go белый, тогда как он должен быть черным, понятно почему. Веб-сайт

Это школьный проект, и я действительно знаю только основы. Извините, если это глупый вопрос.

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  background: rgb(248, 119, 0);
  background: linear-gradient(135deg, rgba(248, 119, 0, 1) 0%, rgba(255, 83, 125, 1) 100%);
}

header {
  width: 97%;
  height: 100px;
  margin: auto;
  padding: 20px;
  background-color: white;
}

header a:link,
a:visited {
  color: black;
  font-weight: bolder;
  font-size: 45px;
  font-style: italic;
  text-decoration: none;
}

header nav {
  float: right;
}

header nav ul li {
  display: inline-block;
  margin-top: 20px;
}

header nav ul li a:link,
a:visited {
  font-size: 24px;
  padding: 0px 10px;
}

main {
  width: 97%;
  margin: auto;
  background-color: white;
  border-radius: 0px 0px 30px 30px;
  padding-bottom: 20px;
}

footer ul li {
  display: inline-block;
}

footer ul li a:link,
a:visited {
  color: white;
  align-self: center;
  text-decoration: none;
}

<header>
  <a href="#">PhoneDirect</a>
  <nav>
    <ul>
      <li><a href="what-to-buy.html">What to Buy</a></li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="contact-us.html">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>

  </section>
</main>

<footer>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="what-to-buy.html">What to Buy</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact-us.html">Contact Us</a></li>
  </ul>
</footer>

................................ .................................................. .................................................. ..........................

Answer 1

Это происходит потому, что вы не указываете c свои стили в ваших header и footer.

Если вы посмотрите на свой код, у вас будет:

header a:link,
a:visited {
  color: black;
  font-weight: bolder;
  font-size: 45px;
  font-style: italic;
  text-decoration: none;
}

Тогда у вас есть:

footer ul li a:link,
a:visited {
  color: white;
  align-self: center;
  text-decoration: none;
}

Вы дублируете a:visited, но не указываете его c родительскому элементу. Запятая не наследует родительский элемент. И поскольку CSS каскадируется и будет стилизовать на основе последнего стиля, который он найдет для элемента, a:visited всегда будет белым, независимо от того, где появляется тег a.

Чтобы исправить, измените * Селекторы состояния 1016 * для header и footer:

header a:link,
header a:visited {
  color: black;
  font-weight: bolder;
  font-size: 45px;
  font-style: italic;
  text-decoration: none;
}

Тогда у вас есть:

footer ul li a:link,
footer a:visited {
  color: white;
  align-self: center;
  text-decoration: none;
}

Изменить: вы также должны отредактировать это, чтобы включить header:

header nav ul li a:link,
header a:visited {
  font-size: 24px;
  padding: 0px 10px;
}