如何更改页眉背景颜色？

我想沿导航菜单将标题背景更改为红色。但是，我的 html/css 没有按预期工作。你能告诉我我做错了什么吗？我虽然那个标题选择器是我的 topnav 部分的容器。不确定为什么通过标题样式更改背景颜色不起作用。如果我将 bakcground-color 放在 .topnav a 下，浮动元素之间就会有间隙

    <head>
    <style>
        body {
    box-sizing: border-box;
    margin: 0;
    background-color: #4c8b41;

}

header {
    background-color: red;
}

.topnav a {
    float: left;
    color: #f8f8f8;

    text-align: center;
    text-decoration: none;
    padding: 10px 10px;
}

.topnav a:hover {
    background-color: black;

}

#topnav-right {
    float: right;
}
    </style>
</head>
<body>
    <header>
        <div class="topnav">
            <a href="#"><h2>Home</h2></a>
            <a href="#"><h2><input type="text" placeholder="Search"></h2></a>
            <div id="topnav-right">
                <a href="#"><h2>Log In</h2></a>
                <a href="#"><h2>Sign Up</h2></a>
            </div>
        </div>
    </header>

</body>
</html>

原文由 noob 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 597

body { box-sizing: border-box; margin: 0; background-color: #4c8b41; } header { background-color: red; height:100px; } .topnav a { float: left; color: #f8f8f8; text-align: center; text-decoration: none; padding: 10px 10px; } .topnav a:hover { background-color: black; } #topnav-right { float: right; }

<html> <head> </head> <body> <header> <div class="topnav"> <a href="#"> <h2>Home</h2> </a> <a href="#"> <h2><input type="text" placeholder="Search"></h2> </a> <div id="topnav-right"> <a href="#"> <h2>Log In</h2> </a> <a href="#"> <h2>Sign Up</h2> </a> </div> </div> </header> </body> </html>

以下规则仅适用于具有 class="header" 的元素，不适用于标头元素。而是使用：

 header {
    background-color: red;
}

CSS 选择器使用以下语法：

 tag
{
  ...
}
.class
{
  ...
}
#id
{
  ...
}

请注意，该标记没有任何前缀，这正是您想要在标头的情况下执行的操作。

更新：问题还在于 header 元素没有高度，因此背景不可见。请注意，这是因为 .topnav 元素中的浮动锚标记。请注意 .topnav:after 的 CSS 更新，它提供了一个 clearfix 。

 <head>
  <style>
    body {
      box-sizing: border-box;
      margin: 0;
      background-color: #4c8b41;
    }

    header {
      background-color: red;
    }

    .topnav:after {
      clear: both;
      display: block;
      content: "";
    }

    .topnav a {
      float: left;
      color: #f8f8f8;
      text-align: center;
      text-decoration: none;
      padding: 10px 10px;
    }

    .topnav a:hover {
      background-color: black;
    }

    #topnav-right {
      float: right;
    }
  </style>
</head>

<body>
  <header>
    <div class="topnav">
      <a href="#">
        <h2>Home</h2>
      </a>
      <a href="#">
        <h2><input type="text" placeholder="Search"></h2>
      </a>
      <div id="topnav-right">
        <a href="#">
          <h2>Log In</h2>
        </a>
        <a href="#">
          <h2>Sign Up</h2>
        </a>
      </div>
    </div>
  </header>

</body>

</html>

原文由 Kevin Bruccoleri 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何更改页眉背景颜色？

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译