如何在没有内联样式的无序列表中设置每个列表项的样式？

Question

我有这个无序列表:

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

如何li在不使用内联样式的情况下使用CSS分别访问每个标记以对每个标记进行样式设置？

Answer 1

如果要以不同方式设置每个列表项的样式,可以使用nth-child选择器:

/* First item */
li:nth-child(1) {
  color: red;
}

/* Second item */
li:nth-child(2) {
  color: blue;
}


/* Add additional items */

<div id="topmenudiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>