时间戳

首页 > 解决方案 > 如何将偶数 li 文本颜色更改为绿色，将奇数更改为红色？

javascript - 如何将偶数 li 文本颜色更改为绿色，将奇数更改为红色？

问题描述

在我的 html 中，我有 ol 和 10 li。我需要仅使用 Javascript 将偶数 li 颜色更改为绿色，将奇数 li 颜色更改为红色。

我怎样才能做到这一点？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Change</title>
  </head>
  <body>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
    </ol>
  </body>
</html>

标签： javascriptdom

解决方案

尝试这个

li {
    color: black;
}
li:nth-child(odd) {
    color: red;
}
li:nth-child(even) {
    color: blue;
}

推荐阅读