<div style="text-indent: 2em;">在HTML和CSS中，層次結構是一種非常重要的概念。使用<div>標簽可以創建多個層次，用于組織和布局網頁的元素。CSS的<div>層次可以決定元素在網頁中的位置、大小以及關系。本文將詳細介紹CSS<div>層次，并通過幾個代碼案例加以解釋和說明。</div>

1. 嵌套的<div>

最基本的<div>層次是嵌套的<div>。我們可以將一個<div>標簽放在另一個<div>標簽之內，形成嵌套的結構。嵌套的<div>可以用于創建不同的容器，用于組織和組合網頁中的元素。

<code><div>
<div>這是外層的div</div>
<div>這是內層的div</div>
</div></code>

上面的代碼中，外層的<div>包含了兩個內層的<div>。這樣，我們可以將外層的<div>視為一個父元素，內層的<div>視為子元素。可以通過CSS來設置父元素和子元素的樣式，從而實現不同的布局效果。

2. 父子選擇器

父子選擇器是CSS中一種常用的選擇器，用于選擇指定父元素下的子元素。使用父子選擇器，我們可以針對特定的父元素下的子元素進行樣式設置。

<code><style>
div p {
color: red;
}
</style>
<br>
  <div>
<p>這是父子選擇器的示例</p>
</div></code>

上面的代碼中，我們使用了父子選擇器來選擇<div>元素下的

元素，并設置其顏色為紅色。通過這種選擇器的使用，我們可以準確地選擇特定的子元素，并對其進行樣式設置。

3. 后代選擇器

除了父子選擇器，CSS還提供了后代選擇器，用于選擇某個元素的后代元素。后代選擇器的匹配條件是前后元素之間存在嵌套關系，不限制父子關系。

<code><style>
div em {
font-style: italic;
}
</style>
<br>
  <div>
<p>這是一個段落</p>
<em>這是一個斜體的文字</em>
</div></code>

上面的代碼中，我們使用了后代選擇器來選擇<div>元素下的<em>元素，并設置其字體樣式為斜體。通過這種選擇器的使用，我們可以選擇<div>元素中的所有后代元素，并對其進行樣式設置。

4. 同級選擇器

同級選擇器是CSS中一種非常有用的選擇器，用于選擇和設置同級元素的樣式。同級選擇器在元素沒有父子關系，但在同一層級時使用。

<code><style>
div ~ span {
background-color: yellow;
}
</style>
<br>
  <div>
<p>這是一個段落</p>
</div>
<br>
  <span>這是一個同級的span元素</span></code>

上面的代碼中，我們使用了同級選擇器來選擇<div>元素之后的<span>元素，并設置其背景顏色為黃色。通過這種選擇器的使用，我們可以對同一層級的元素進行樣式設置。

<div style="text-indent: 2em;">總之，CSS的<div>層次是一種非常有用的概念，可以用于組織和布局網頁的元素。通過嵌套的<div>、父子選擇器、后代選擇器和同級選擇器的應用，我們可以實現不同的布局效果，并對特定的元素進行樣式設置。</div>