更改列表中每个 属性 的颜色（HANDLEBARS JS & CSS）

Question

使用 Handlebars，我可以显示从 Spotify 获取的艺术家列表。我希望能够改变每个艺术家的颜色和风格，但我不知道如何将它们分开？我该怎么做呢？非常感谢您的帮助或为我指明正确的方向。

<script id="artists" type="text/x-handlebars-template">
    <h2>artists
      </h2>
    <dl class="pull-left">
      <dd class="text-overflow" id="artistcolumn">
        <ol>
          {{#each items}}
          <li>{{name}}</li>
          {{/each}}
        </ol>
      </dd>
    </dl>
  </script>

我试过使用 :nth-of-type() 或 artistcolumn 但它没有用？

I'm trying to get it to look like this

Answer 1

您可以通过设置列表的 CSS 来实现。这是一个例子：

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

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

li:nth-child(3){
color:green;
}

---

为每个列表条目设置颜色的另一种方法是为您呈现的每个项目添加颜色。 如果 items 是一个对象数组，您可以设置 items[index].color = #0000FF 然后将十六进制颜色应用于每个 li HTML 元素。