总表格/容器中的第n个子元素

Question

我有一些具有相同类名（class="myDiv"）的div，它们可以放置在一个.container中的任何位置...

我想选中所有具有.myDiv类名的div，并应用如下的CSS样式：

• 第一个div应该是“红色”
• 第二个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>

期望结果：

实际结果：

- Reddy

---

这是一个比较常见的误解，但需要注意的是nth-child并不意味着“第n次出现”。它的意思是只有当那个具体的项目是那个具体子元素时才会应用。例如，颜色green仅适用于***(A)：**.myDiv (B)：其父元素的第二个子元素。您的.container有两个子元素（<table>和.myDiv），这就是为什么“five”是绿色的原因。 - Tyler Roper

此外，考虑到您的嵌套HTML，如果没有JavaScript是不可能实现的。（当然，除非您想变得非常具体，例如 table > tr > td > table > tr > td > .myDiv { color: green; }） - Tyler Roper

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

- Jason W

---

@Jason W，非常好...感谢你的建议...我接受了你的答案并点赞了它...继续保持好工作。 - Reddy