javascript - 如何依次更改 或 颜色

Question

我想尽可能地依次更改 li 或 tr 的颜色。

注意:- 我想在 while 循环中调用它，所以静态类将不是解决方案

我想要输出 lke:-

<li>line1</li> //white background
<li>line2</li> //red background
<li>line3</li> //white background
<li>line4</li> //red background

或者如果可能的话:-

<tr>
<td>line1</td>  //white background
</tr>
<tr>
<td>line2</td>  //red background
</tr>
<tr>
<td>line3</td>  //white background
</tr>
<tr>
<td>line4</td>  //red background
</tr>

我正在尝试的是:-

<?php
$fields = CFS()->get('gallery');
foreach ($fields as $field) { <?
<table>
<tr><td><?php echo $field['slide_title']; ?></td></tr>
<tr><td><?php echo $field['upload']; ?></td></tr>
</table>
<?php }  ?>

Answer 1

您可以通过 CSS :nth-of-type 奇数和偶数选择器实现这一点。

JSFiddle - DEMO

li:nth-of-type(odd) {
    color:red;
}
li:nth-of-type(even) {
    color:blue;
}

对于 td 的选择器:

JSFiddle - DEMO

table tr:nth-of-type(odd) {
    color:red;
}
table tr:nth-of-type(even) {
    color:blue;
}

你也可以像这样使用 CSS :nth-child 选择器:

JSFiddle - DEMO

table tr:nth-child(2n+1) {
    color:red;
}
table tr:nth-child(2n) {
    color:blue;
}

注意: tr:nth-child(2n) - 表示 HTML 表格的偶数行。

和 tr:nth-child(2n+1) - 表示 HTML 表格的奇数行。

• Mozilla MDN :nth-of-type selector

• Mozilla MDN :nth-child selector