我有一个带有页眉、导航、内容、页脚和侧面广告空间的网格。我现在正在尝试对每个区域进行颜色编码，这样我就可以直观地看到我在做什么，而且我似乎无法更改标题的颜色。其他部分都改得很好。我不仅不能更改部分的背景，而且不能更改文本颜色，也不能更改任何看起来的内容。感谢所有的帮助，这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
* {
font-family: Arial;
box-sizing: border-box;
}
body {
margin: 0;
}
#grid-container {
background-color: lightgray;
display: grid;
grid-template-columns: 15% 42.5% 42.5%;
grid-template-rows: 20% 15% 45% 20%;
grid-template-areas:
"header header header"
"nav nav nav"
"advert content content"
"advert footer footer";
}
#header {
background-color: yellow;
grid-area: header;
}
#nav {
background-color: purple;
grid-area: nav;
}
#content {
background-color: blue;
grid-area: content;
}
#advert {
background-color: green;
grid-area: advert;
}
#footer {
background-color: red;
grid-area: footer;
}
</style>
</head>
<body>
<div id="grid-container">
<head id="header">
header
</head>
<nav id="nav">
nav
</nav>
<main id="content">
content
</main>
<aside id="advert">
advert
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</aside>
<footer id="footer">
footer
</footer>
</div>
</body>
</html>
您使用的是<head>，而您可能打算使用<header>。