总表/容器中的第n个子项

Question

我在class="myDiv"中有一些具有相同类（.container）的div，这些div基本上可以位于容器内的任何位置...

我要定位所有具有类.myDiv的div并应用css，如下所示：

• 第一个div的颜色应为“红色”
• 第二个“绿色”
• ...

我当前的方法如下： jsFiddle （下面的代码段副本）

.myDiv:nth-child(1){color:red;}
.myDiv:nth-child(2){color:green;}
.myDiv:nth-child(3){color:aqua;}
.myDiv:nth-child(4){color:orange;}
.myDiv:nth-child(5){color:pink;}

<div class="container">
  <table>
    <tr>
      <td><div class="myDiv">One</div></td>
      <td>Normal text</td>
      <td>Normal text</td>
      <td>Normal text</td>
      <td>
        <table>
          <tr>
            <td><div class="myDiv">Two</div></td>
          </tr>
        </table>
      </td>
      <td><div class="myDiv">Three</div></td>
      <td><div class="myDiv">Four</div></td>
    </tr>
  </table>
  <div class="myDiv">Five</div>
</div>

预期结果：

实际结果：

Answer 1

如注释中所述，nth-child不是“第n次出现”，而是基于父元素的特定子元素。

但是，如果将CSS修改为以下内容，则可以使用基本的javascript实现类似的效果：

.myDiv1{color:red;}
.myDiv2{color:green;}
.myDiv3{color:aqua;}
.myDiv4{color:orange;}
.myDiv5{color:pink;}

然后，以下简单的javascript将指定第n个匹配项。

var divs = document.getElementsByClassName("myDiv");
for (var i = 0; i < divs.length; i++)
    divs[i].classList.add('myDiv'+(i+1));

JSFiddle