我在class="myDiv"
里面有一些同类(.container
)的div,这些div基本上可以放在容器内的任何地方......
我想定位所有具有类.myDiv
的div并应用这样的css:
我目前的方法如下: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>
预期结果:
实际结果:
正如评论中所述,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));