将CSS类应用于同一标记的插件生成元素？

Question

基本上，我有一个插件可以生成由一个<ul>标记和多个<li>标记组成的HTML菜单。我想为每个菜单项应用不同的背景颜色，但我无法将这些CSS类添加到每个列表项，因为它们是以编程方式生成的，因此直接无法访问。有没有办法将不同的类应用于同一标签的多个子元素？在我没有访问插件文件的情况下。

Answer 1

是的，这是可能的。

您可以使用nth-of-type(n)选择器定位不同的<li>元素，而无需为生成的代码添加类。

body {font-size: 22px}

ul li:nth-of-type(1){background:red}
ul li:nth-of-type(2){background:blue}
ul li:nth-of-type(3){background:green}
ul li:nth-of-type(4){background:yellow}
ul li:nth-of-type(5){background:orange}
ul li:nth-of-type(6){background:purple}
ul li:nth-of-type(7){background:cyan}
ul li:nth-of-type(8){background:brown}
ul li:nth-of-type(9){background:pink}

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Watermelon</li>
  <li>Pear</li>
  <li>Milk</li>
  <li>Cheese</li>
  <li>Bread</li>
  <li>Jam</li>
  <li>Sugar</li>
</ul>

您还可以使用页面上的其他元素来确保更改仅应用于您要影响的元素。

示例：

body {
  font-size: 22px
}

.foo ul li:nth-of-type(1) {
  background: red
}

.foo ul li:nth-of-type(2) {
  background: blue
}

.foo ul li:nth-of-type(3) {
  background: green
}

.foo ul li:nth-of-type(4) {
  background: yellow
}

<div class="bar">

  <h1> First List (not modified)</h1>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Watermelon</li>
    <li>Pear</li>
  </ul>

</div>

<div class="foo">

  <h1> Second List (modified)</h1>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Watermelon</li>
    <li>Pear</li>
  </ul>

</div>

<div class="bar">

  <h1> Third List (not modified)</h1>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Watermelon</li>
    <li>Pear</li>
  </ul>

</div>