导航栏（navbar）背景色未覆盖文本元素的问题排查与解决

问题原因 #

• 全局通配选择器*设置了background-color: #FCF6F5，这个选择器会匹配所有HTML元素，包括导航栏内的<h1>和<a>标签。
• 背景色属于非继承属性，子元素不会自动沿用父元素的背景色，因此即使#navbar设置了#2BAE66，子元素依然会使用*选择器定义的浅背景色，导致导航栏样式不统一。

解决方案 #

方案一：调整全局样式作用范围（推荐） #

将全局样式里的背景色属性移到body标签上，这样页面主体使用浅背景色，导航栏的子元素会默认继承父元素的背景色：

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

body {
  background-color: #FCF6F5;
}

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

nav a {
  font-size: 24px;
  color: #fff; /* 可选：添加白色文字提升可读性 */
}

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

#logo {
  font-size: 35px;
  color: #fff; /* 可选：添加白色文字提升可读性 */
}

方案二：强制子元素继承父元素背景色 #

直接给导航栏内的子元素设置background-color: inherit，让它们强制继承父元素的背景色：

* {
  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;
}

/* 强制导航栏内的子元素继承背景色 */
#navbar h1, #navbar a {
  background-color: inherit;
  color: #fff; /* 可选：添加白色文字增强对比 */
}

nav a {
  font-size: 24px;
}

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

#logo {
  font-size: 35px;
}

内容的提问来源于stack exchange，提问作者Karol Wlosek