html - 如何在没有内联样式的情况下为无序列表中的每个列表项设置样式？

我有这个无序列表:

<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 分别设置每个标签的样式？

最佳答案

如果您想为每个列表项设置不同的样式，您可以使用 nth-child selector :

/* 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>

关于html - 如何在没有内联样式的情况下为无序列表中的每个列表项设置样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31545544/