Question

我想沿导航菜单将标题背景更改为红色。但是，我的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>

Answer 1

以下规则仅适用于具有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>

Answer 2

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>

Answer 3

您正在尝试将CSS应用于类标题，而不是元素。

header { /*remove the '.'*/
    background-color: red;
}
/* EDIT */
.topnav {
    background-color: red;
    height: 80px;

}

尝试将其应用于您的div。

编辑2：尝试添加高度

Answer 4

在CSS中将'.header'更改为'header'，或在class='header'标记中添加header。这应该可以解决您的问题。 CSS中的.header引用html中的类。

修改

似乎标题div没有任何高度。这是更新的代码。

body {
    box-sizing: border-box;
    margin: 0;
    background-color: #4c8b41;
}

.header {
    background-color: red;
    height: 87px;
}

.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;    
}

<body>
    <header>
        <div class="topnav header">
            <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>

Answer 5

删除点以使样式正确应用。点语法用于类选择。标头是HTML元素，因此不需要点。标头不显示背景色的原因是其内部的所有元素都设置为浮动。浮动div不会影响父级的高度。在您的情况下，由于所有元素都是浮动的，因此父div的高度变为零，因此您看不到背景色

Answer 6

header { 
    background-color: red;
}

如果不起作用，则在标题部分添加一个ID

<body>
    <header id="some_id">
        <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>

像这样比添加CSS

#some_id{background-color: red;}

或

#some_id{background: red;}

如何更改标题背景颜色？

6 个答案: