背景颜色不适用于导航栏中的文本下方

Question

我从来没有遇到过这个问题，但我只是希望整个导航栏具有相同的背景颜色，但它不适用于锚标记和 h1。

有人可以解释为什么会发生这种情况以及如何正确执行吗？

* {
  padding: 0;
  margin: 0;
  background-color: #FCF6F5;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: #2BAE66;
}

nav a {
  font-size: 24px;
}

a:hover {
  color: #0f4c2a;
  font-size: 26px;
}

#logo {
  font-size: 35px;
}

<nav id="navbar">
  <h1 id="logo">EverBike</h1>
  <div id="textnav">
    <a>About</a>
    <a>Contact</a>
    <a>Prices</a>
  </div>
</nav>

Answer 1

原因是您通过使用

background-color: #FCF6F5;

选择器将 * 分配给

everything

，这适用于除 #navbar 之外的

all

元素（它有自己的背景定义），即也适用于

div

，

a

，

#textnav

，

h1 and 

#logo`。

您只需忽略这一点，例如仅在

body

上使用该背景颜色，这将解决您的问题。

* {
  padding: 0;
  margin: 0;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

html,
body {
  background-color: #FCF6F5;
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: #2BAE66;
}

nav a {
  font-size: 24px;
  background: transparent;
}

a:hover {
  color: #0f4c2a;
  font-size: 26px;
}

#logo {
  font-size: 35px;
}

<nav id="navbar">
  <h1 id="logo">EverBike</h1>
  <div id="textnav">
    <a>About</a>
    <a>Contact</a>
    <a>Prices</a>
  </div>
</nav>