html - 同一部分的两个 div

Question

在下面的 HTML 代码中，为什么他们使用两个 div，一个带有类，另一个带有 ID，而不是只使用其中一个来提供属性？

---

.header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-5/htmlcss1-img_canyon.jpeg");
  background-position: center center;
  background-size: cover;
  height: 700px;
  width: 100%;
}

#header-text {
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: 25%;
  width: 60%;
}

 <div class="header">
    <div  id="header-text">
      <h1>Travel Like Never Before</h1>
      <h2>Whether you're looking for adventure or luxury, let us help you plan your perfect getaway.</h2>
    </div>
 </div>

Answer 1

原因是因为 .header 类定义了背景图像的区域，而 #header-text id 定义了图像顶部的文本。由于文本居中放置在较大的标题区域内，因此它需要一个单独的容器，以便可以四处移动并适当设置样式。