css div 多重嵌套

可以通过多层嵌套 div 元素来创建复杂的布局和样式。例如：

<div class="container">
  <div class="header">
    <h1>Page Title</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <h2>Sidebar Title</h2>
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </div>
    <div class="main">
      <h2>Main Content Title</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas!</p>
    </div>
  </div>
  <div class="footer">
    <p>Copyright © 2021</p>
  </div>
</div>

在上面的示例中，我们使用了四个嵌套的 div 元素来创建一个简单的页面布局。每个 div 都有一个不同的类名，以便我们可以对其进行样式化。我们可以使用 CSS 来为每个类添加样式，例如：

.container {
  max-width: 960px;
  margin: 0 auto;
}

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.content {
  display: flex;
}

.sidebar {
  flex-basis: 25%;
  background-color: #e6e6e6;
  padding: 20px;
}

.main {
  flex-basis: 75%;
  padding: 20px;
}

.footer {
  background-color: #f2f2f2;
  padding: 20px;
}

在上面的 CSS 中，我们使用了一些常见的布局属性，如 display、flex 和 flex-basis，来控制页面的外观和行为。我们还使用了背景颜色、填充和边距等属性来添加一些样式。