CSS选择具有相同类名的子级

Question

我有一个供用户输入的HTML。我的工作是选择“ mychild”类名，并为每个mychild设置不同的颜色。

问题：我使用first-of-type或nth-of-type()（我也使用过first-chil），但都无法解决。因此first-of-type，nth-of-type()或first-chil并不是解决方案。

jsfiddle

.parent .mychild:first-of-type {
  text-decoration: underline;
  background: yellow;
}

.parent .mychild:nth-of-type(2) {
  text-decoration: underline;
  background: red;
}

.parent .mychild:nth-of-type(3) {
  text-decoration: underline;
  background: green;
}

<div class="parent">
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
  <div class="other">Child</div>
  <div class="other">Child</div>
  <div class="mychild">Child</div>
</div>