嘿，我来帮你排查下为啥Header的背景色没生效！这种问题我碰到过好多次，大概率是这几个常见原因，你可以挨个检查下：

• CSS选择器匹配错误：你写的选择器是不是和HTML里Header的元素/类/ID对应不上？比如HTML里是<header class="page-header">，但CSS里写的是.header，那肯定匹配不到。你可以打开浏览器开发者工具（F12），选中Header元素，看看「Styles」面板里有没有你写的背景色样式，如果没出现，那就是选择器写错了。

• CSS优先级被覆盖：如果你的Header样式被其他更高优先级的样式压过了，比如行内样式（style="background-color: #fff"）、更具体的嵌套选择器（比如.container header比单独的header优先级高），或者带!important的样式，都会让你的设置失效。在开发者工具里看，你的背景色样式如果被划掉了，就找找上面哪个样式把它覆盖了。

• CSS文件没加载成功：检查下HTML里引入CSS的<link>标签路径对不对。比如CSS文件在css/style.css文件夹里，但你写的是style.css，如果HTML文件不在根目录，路径就错了。可以在浏览器控制台的「Network」面板里看CSS文件的状态，要是显示404，那就是路径问题。

• Header元素的显示/尺寸问题：如果Header是display: inline模式，背景色只会包裹文字区域，看起来没铺满；或者Header里没有内容、高度为0，背景色自然看不到。你可以给Header加个min-height，或者改成display: block试试，也可以检查下有没有overflow: hidden这类属性影响了元素尺寸。

• 属性拼写错误：别笑，这真的是高频坑！比如把background-color写成英式拼写background-colour（CSS不认这个），或者简写为bg-color（这不是合法的CSS属性），再仔细核对下属性名。

• 浏览器缓存搞鬼：有时候浏览器会缓存旧的CSS文件，你修改后的样式没被加载。可以按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存再看。

• 样式被不小心注释掉了：检查下你的CSS代码里，是不是把背景色样式用/* */注释掉了，或者HTML里的<link>标签被注释了，导致CSS根本没生效。

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