为什么我的 DIV 元素的背景颜色不可见？ [复制]

Question

/**This code doesnt change the color of the class row1**/

html, body {
  font-family :'montserrat',sans-serif;
  }
h1 {
  border-left  : 2px solid #00f28f;
  font-size    : 48px;
  font-weight  : 400;
  padding-left : 20px;
  }
.main {
  margin-top : 80px;
  }
form input {
  background : #F0f0f0;
  border     : none;
  font-size  : 36px;
  padding    : 20px;
  width      : 100%;
  transition : background 0s, border-left 0s;
  }
form input:focus {
  background  : #fff;
  border-left : 2pxsolid #000;
  box-shadow  : none;
  outline     : none;
  }
button.button {
  background : transparent;
  border     : none;
  color      : #00f2bf;
  cursor     : pointer;
  font-size  : 36px;
  padding    : 20px 24px;
  transition : background 0s, border-left 0s;
  }
button.button:hover {
  background : #00f2bf;
  color      :  #fff;
  }
.row1 {
  background : yellowgreen;
  }

<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<header class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-2 col-md-2">
        <h1>Kalyan The Coder</h1>
      </div>
    </div>
  </div>
</header>
<div class="main">
  <div class="container2">
    <div class="row1">
      <form class="form">
        <div class="col-xs-8 col-md-4">
          <input type="text" id="TextBox1" placeholder="Enter your query">
        </div>
        <div class="col-xs-4 col-md-2">
          <button type="submit" class="button">post</button>
        </div>

这个命令工作正常，只是第 1 行的颜色没有改变，不知道为什么。
如果我在 CSS 上将 row1 更改为 row，标题的颜色会发生变化。我不确定如何更改 CSS 样式表中的类。
我是初学者，想对此进行更多探索。

Answer 1

你需要给你的元素高度。

---

它有助于简化问题。目前，如果您将height: 100px 添加到您的row1 类中，则背景会根据需要变为可见的yellowgreen：

.row1 {
    background: yellowgreen;
    height: 100px;
}

让我们用一个简化的 sn-p 来展示区别：

.row-1 { background-color: yellowgreen; }
.row-2 {
  height: 100px;
  background-color: red;
}

<div class="row-1"></div>
<div class="row-2"></div>

注意你怎么在这里看不到row-1？添加高度、内边距或任何其他扩展 div 区域的内容都会使其显示：

.row-1 { background-color: yellowgreen; }

<div class="row-1">
  <p>This should make the row visible.</p>
</div>