更改列表中每個屬性的顏色（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，但它不起作用？

我試圖讓它看起來像這樣

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 元素。