CSS技术求助：header背景颜色未显示在文字后方

问题根源 #

你用通配符选择器*给所有元素都设置了background-color: #2a292b，包括header内部的h1、nav、ul、li等子元素。这些子元素的背景色会直接覆盖header的背景色，导致你看不到header设置的#3d3747背景。

修复方案 #

提供两种简单有效的修复方式：

方案1：将全局背景色移至body选择器 #

把通配符里的background-color属性转移到body上，仅让body拥有默认背景，header及其子元素可正常继承或单独设置样式：

* {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: aliceblue;
}
body {
    background-color: #2a292b;
}
header {
    background-color: #3d3747;
}
h1{font-size: 50px;text-align: center}
h2{font-size: 40px;text-align: center}
h3{font-size: 30px;text-align: center}
p{font-size: 20px;text-align: center; line-height: 1.5;}

方案2：让header子元素继承背景色 #

给header下的所有子元素设置背景色继承自header，避免子元素背景遮挡header的背景：

* {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: aliceblue;
    background-color: #2a292b;
}
header {
    background-color: #3d3747;
}
header * {
    background-color: inherit;
}
h1{font-size: 50px;text-align: center}
h2{font-size: 40px;text-align: center}
h3{font-size: 30px;text-align: center}
p{font-size: 20px;text-align: center; line-height: 1.5;}

验证效果 #

修改后，header内部的文字、导航元素都会适配header的背景色，#3d3747背景会正常显示在文字后方。

内容的提问来源于stack exchange，提问作者Youssef sfexi