html - 如何在 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)

我想根据其值 1、2、3 为 a、b、c 添加不同的颜色。“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;
}

标签： htmlcssflask

Answer 1

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

IE

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

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