css - 我不能把盒子放在盒子里加上颜色不变

Question

在我网站的主页上有 4 个超链接，我希望它们以相同的方式出现在每个页面上。除了我希望我所在页面的链接与我将鼠标放在它上面时的颜色相同。

我想我可以用这段代码得到它:

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>

问题是它保持黑色背景颜色和白色字体颜色，并且它位于其他链接下方而不是与它们内联。

Answer 1

但我认为在这种情况下将链接放在“div”中是一种不好的做法。您可以简单地为链接注册一个类并为该类编写样式。

.navigation {
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
  font-size: 30px;
}

.navigation a {
  background: black;
  border: 1px solid grey;
  border-radius: 7px;
  color: white;
  display: inline-block;
  margin: 100px 35px;
  padding: 14px;
  text-decoration: none;
  opacity: 0.75;
  font-family: impact;
}

.navigation a:hover {
  background: white;
  border: 1px solid black;
  color: black;
}

#contact a {
  background: white !important;
  color: black !important;
}

<div class="navigation">
  <a href="./productions.html">Mes productions</a>
  <a href="./DJ.html">DJ</a>
  <a target="_blank" href="./CV.pdf">Mon CV</a>
  <div id="contact">
    <a href="./contact.html">Me contacter</a>
  </div>
</div>