我有一個包含五個部分的div。我想要每一個有不同的背景顏色。

通常，人們會為每一個創建一個類:

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.b1 {background-color: blue;}
.b2 {background-color: red;}
.b3 {background-color: black;}
.b4 {background-color: beige;}
.b5 {background-color: blue;}

超文本標記語言

<div>
   <section class="b1">Block 1</section>
   <section class="b2">Block 2</section>
   <section class="b3">Block 3</section>
   <section class="b4">Block 4</section>
   <section class="b5">Block 5</section>
</div>

但是我最近看到了別人的HTML，每一個都有不同的顏色，但是在任何一個section標簽中都沒有類。在CSS中有沒有其他方法可以做到這一點？

試圖在每個HTML標簽中不包含類的情況下為每個部分創建不同的背景顏色。

我不明白你為什么要逃課。也就是說，如果你的部分有相同的父類，你可以使用:

section:nth-of-type(1) {
  background-color: lemonchiffon;
}

section:nth-of-type(2) {
  background-color: darksalmon;
}

section:nth-of-type(3) {
  background-color: aquamarine;
}

section:nth-of-type(4) {
  background-color: papayawhip;
}

section:nth-of-type(5) {
  background-color: hotpink;
}

<div>
  <section>Block 1</section>
  <section>Block 2</section>
  <div>this is not a section</div>
  <section>Block 3</section>
  <section>Block 4</section>
  <section>Block 5</section>
</div>

使用javascript，你訪問子元素并添加顏色，有一個例子:

let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
childItems.forEach(function (element, index) {
    if (index == 0) {
        element.style.backgroundColor = 'blue';
    }
    if (index == 1) {
        element.style.backgroundColor = 'red';
    }
    /*
    if .... n times
    */
});

為了使它更清晰，您可以將顏色值保存在一個數組中，并執行以下操作:

let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
let colorsValue = ['blue', 'red', 'black', 'beige', 'blue'];
childItems.forEach(function (element, index) {
    element.style.backgroundColor = colorsValue[index];
});