在網頁開發中，<div> 是一個容器元素，可以用來包裹其他元素或者分割頁面的不同部分。有時候，我們希望在一個<div>下面的多個子<div>元素具有不同的背景顏色，以便更好地區分它們。本文將通過幾個代碼案例來詳細解釋如何在一個<div>下面的<div>依次設置不同的背景顏色。
案例一：使用CSS類名實現 ，在CSS中定義不同的顏色類名，例如紅色（red）、藍色（blue）、綠色（green）等。然后，為每個子<div>元素分別添加對應的類名，即可實現不同顏色的效果。
下面是一個示例代碼：

<pre>
<style>
.red {
background-color: red;
}
<br>
    .blue {
background-color: blue;
}
<br>
    .green {
background-color: green;
}
</style>
<br>
<div>
<div class="red">
這是紅色背景的<div>元素
</div>
<br>
    <div class="blue">
這是藍色背景的<div>元素
</div>
<br>
    <div class="green">
這是綠色背景的<div>元素
</div>
</div>

在上述代碼中，我們為每個子<div>元素分別添加了不同的顏色類名，通過CSS的樣式定義，實現了這些元素的不同背景顏色。
案例二：使用CSS偽類實現 除了使用類名來區分不同的顏色，還可以使用CSS的偽類來實現。通過:nth-child()偽類，我們可以選擇某一組元素中的第幾個元素，從而對其進行樣式設置。
下面是一個示例代碼：

<pre>
<style>
div:nth-child(1) {
background-color: red;
}
<br>
    div:nth-child(2) {
background-color: blue;
}
<br>
    div:nth-child(3) {
background-color: green;
}
</style>
<br>
<div>
<div>
這是第一個子<div>元素，紅色背景
</div>
<br>
    <div>
這是第二個子<div>元素，藍色背景
</div>
<br>
    <div>
這是第三個子<div>元素，綠色背景
</div>
</div>

在上述代碼中，我們使用:nth-child()偽類對每個子<div>元素進行選取，并分別定義不同的背景顏色。
通過以上兩個案例，我們可以看到在一個<div>下面的<div>元素可以通過 CSS 類名或者偽類來實現依次設置不同的背景顏色。這種技術可以使頁面的結構更加清晰，同時也可以提高用戶的交互體驗。