html - 仅使用 CSS 定位页面上类的每个实例以获得自定义背景颜色

Question

我的页面上重复了 3 次相同的代码，我需要定位 ImageSection-hold 类并为每个代码设置不同的背景颜色。

我无法通过 HTML 或 Javascript 添加或删除任何类，这必须使用 CSS 来完成。

尝试: 1.).ImageSection-hold:nth-of-type(1) -这将所有背景更改为相同的颜色 2.) .ImageSection-hold{ 背景颜色:#fff;} .ImageSection-hold~.ImageSection-hold{ 背景颜色:#000;}

<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
      </div>
    </div>
  </div>
</section>
<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
      </div>
    </div>
  </div>
</section>
<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
      </div>
    </div>
  </div>
</section>

Answer 1

您可以使用nth-child 选择器。更多信息 here

.ImageSection:nth-child(1) .ImageSection-hold{
   background-color: red
}
.ImageSection:nth-child(2) .ImageSection-hold{
   background-color: green
}
.ImageSection:nth-child(3) .ImageSection-hold{
   background-color: blue
}

<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
        asd
      </div>
    </div>
  </div>
</section>
<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
      zxc
      </div>
    </div>
  </div>
</section>
<section class="section ImageSection">
  <div class="container">
    <div class="ImageSection-hold">
      <div class="ImageSection__desc">
      qwe
      </div>
    </div>
  </div>
</section>