如何在 html if 块中添加不同的颜色背景？

Question

我正在使用烧瓶来提供 html 服务。在下面这段代码中：

{% if terms|length > 1 %}
        <div class="term">
        {% for term in terms %}
            {{ term }} &nbsp;&nbsp;
        {% endfor %}
        </div>
    {% endif %}

'terms' 最初是一个简单的项目列表['a', 'b', 'c']。

当前 div class="term" 标记在迭代值时为每个术语添加相同的背景颜色。现在，这些术语变成了一个元组列表，其值如下：

('a': 1)
('b': 2)
('c': 3)

我想根据 a、b、c 的值 1、2、3 添加不同的颜色。 '1' 给出一个核心，'2' 给出另一种颜色，'3' 也给出另一种颜色。

当前样式表有一个条目：

div.term {
    background-color:mintcream;
} 

html和css如何实现这个效果？

编辑：根据 trimkas 的建议，我添加了 css 定义：

div.term.term-count-1 {
    background-color:green;
}
div.term.term-count-2 {
    background-color:lightblue;
}
div.term.term-count-3 {
    background-color:deepskyblue;
}
div.term.term-count-4 {
    background-color:blueviolet;
}

Answer 1

在{% for term in terms %} 循环内移动包装div，并向包含当前迭代次数（索引）的div 添加一个类。

即

{% if terms|length > 1 %}
    {% for term in terms %}
    <div class="term term-count-{{loop.index}}">
        {{ term }} &nbsp;&nbsp;
    </div>
    {% endfor %}
{% endif %}

然后通过.term-count-0.term-count-1等以您需要的方式在CSS中引用。