本文详解为何全局重置样式（* 选择器）会覆盖 header 的背景色，并提供专业、可复用的 css 修复方案，确保 header 背景色精准生效且不影响子元素。
本文详解为何全局重置样式（* 选择器）会覆盖 header 的背景色，并提供专业、可复用的 css 修复方案，确保 header 背景色精准生效且不影响子元素。
在 CSS 中，*（通配符选择器）会对页面中所有元素应用声明的样式，包括 header 及其内部的 h1、nav、ul、li 等子元素。你当前的样式：
* {
background-color: #2a292b;
}
header {
background-color: #3d3747;
}看似为 <header> 指定了更深的紫色背景，但实际上——由于 * 规则作用于 <header> 本身及其所有后代元素，而 CSS 中相同权重下后声明的规则会覆盖先声明的规则，但此处存在一个关键误区：* 选择器匹配的是每个独立元素（如 <header>、<h1>、<nav> 等），因此 <h1> 和 <nav> 等子元素也获得了 background-color: #2a292b，它们会覆盖 header 的背景并形成视觉“透出”效果，导致 header 的背景色无法完整呈现。
更严重的是：当 h1、nav 等子元素拥有不透明背景色时，它们会遮挡父容器（header）的背景，使 header 的 #3d3747 实际不可见——尤其当这些子元素未设置透明背景或未显式清除背景时。
✅ 正确做法是：*将全局基础样式（字体、文字颜色、页面背景）绑定到 body 上，而非 ``**。这样既保持页面统一风格，又避免污染语义化容器的背景继承关系。
立即学习“前端免费学习笔记（深入）”；
优化后的推荐写法如下：
/* ✅ 推荐：基础样式作用于 body，安全可控 */
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: aliceblue;
background-color: #2a292b; /* 页面整体背景 */
margin: 0; /* 移除默认 body 外边距，防止 header 顶部空白 */
}
/* ✅ header 独立背景色生效（无子元素干扰） */
header {
background-color: #3d3747;
padding: 2rem 0; /* 增加内边距，让文字与边界呼吸 */
}
h1 { font-size: 50px; text-align: center; margin: 0; }
h2 { font-size: 40px; text-align: center; margin: 0; }
h3 { font-size: 30px; text-align: center; margin: 0; }
p { font-size: 20px; text-align: center; line-height: 1.5; margin: 0; }
/* ⚠️ 关键：重置 header 内子元素背景，避免覆盖 */
header h1,
header nav,
header ul,
header li,
header a {
background-color: transparent; /* 显式设为透明，确保 header 背景透出 */
}? 补充建议：
- 避免使用 * { background-color: ... } —— 它违背语义化设计原则，极易引发不可预测的层叠问题；
- 若需重置所有元素默认样式，推荐使用现代 CSS Reset（如 modern-normalize）或仅重置 margin/padding；
- 使用浏览器开发者工具（Elements → Styles 面板）检查 header 及其子元素的 computed background-color，快速定位被意外覆盖的样式。
遵循以上结构，你的 header 将稳定显示 #3d3747 背景色，文字清晰居中，整体布局专业可控。
