CSS - 交换颜色项

Question

我想做的是：

假设我有以下列表：

• 第1项
• 第2项
• 第3项
• 第4项

我想在两种颜色之间交替，例如：

• 第1项（蓝色）
• 第2项（橙色）
• 第3项（蓝色）
• 第4项（橙色）

但是我希望在CSS中控制这种行为，所以我可以写：

<ul>
    <li>Item 1</li>
</ul>

有人能指出我如何实现这个目标吗？

Answer 1

您可以使用:nth-child伪类：

＆＃13;

＆＃13;

ul li:nth-child(2n+1) { color: blue; }
ul li:nth-child(2n) { color: orange; }

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS：nth-​​child

li { color: blue; }
li:nth-child(odd) { color: orange; }

JSFiddle Code