html - CSS 选择相同的类名并分配不同的属性

Question

我有一个用户将输入的 HTML。

注意:标记 HTML 永远不会像那样。有时候这个教室会上移，那个教室会下移，如此等等。或者，他们会增加更多的教室。

我的工作是为每个我的 child 寻找“我的 child ”类名称和样式不同的颜色:我的第一个 child 是红色的，第二个是绿色的，第三个是蓝色的。

问题:我使用 first-of-type 或 nth-of-type()(我确实也使用了 first-chil)它们都不起作用。因此 first-of-type、nth-of-type() 或 first-child 或 ~ 不是解决方案。

jsfiddle

.school .my-child:first-of-type {
      color: red;
    }
    .school .my-child:nth-of-type(2){
      color: green;
    }
    .school .my-child:nth-of-type(3) {
      color:blue;
    }

    <div class="school">
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="my-child">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="my-child">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
      <div class="class-room">
          <div class="my-child">Child</div>
      </div>
      <div class="class-room">
          <div class="other">Child</div>
      </div>
    </div>

Answer 1

添加一些 JavaScript 为每个 .my-child div 分配一个新类:child1、child2 等。然后针对那些新类颜色类。

document.querySelectorAll('.school .class-room .my-child')
  .forEach(function(el, i) {
    el.className += ' child'+(i+1);
  })

.my-child.child1 {
  color: red;
}

.my-child.child2 {
  color: green;
}

.my-child.child3 {
  color: blue;
}

/* add as many more as necessary */

<div class="school">
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
  <div class="class-room">
    <div class="my-child">Child</div>
  </div>
  <div class="class-room">
    <div class="other">Child</div>
  </div>
</div>

或者，如果您对所有内容都使用 jQuery，则可以将其用于 JavaScript:

$('.school .class-room .my-child')
  .each(function(i, el) {
    $(this).addClass('child'+(i+1));
  });