如何改變 <li> 要么 <tr> 顏色相繼

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選擇器

• Mozilla MDN：第n個孩子選擇器

Answer 2

試試這個PHP代碼，

$i = 1;
$result = "";
while(ur-condition)
{
  if($i%2 == 0)
    $result .= "<li style='background-color: red'>line$i</li>";
  else
   $result .= "<li style='background-color: white'>line$i</li>";
  $i++;
}

echo $result;

Answer 3

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>    

CSS

*{margin:0; padding:0; font-family:Arial; font-size:12px; color:#333;}
ul, li{list-style:none;}
ul{margin:10px;}
li:nth-child(odd){background-color:blue;}
li:nth-child(even){background-color:red;}
li{line-height:22px; padding:5px; color:#fff;}

小提琴

Answer 4

你可以使用jquery，它也適用於舊版本的ie

http://jsfiddle.net/victor_007/96d0k2zo/

$( "tr:odd , ul li:odd" ).css( "background-color", "#bbbbff" );