如何在Flask模板中基于元组数值为元素设置差异化CSS背景色

实现方案 #

你之前的代码把所有term都放在同一个div.term容器内，只能给整体设置统一背景。要实现单个term匹配对应数值的不同背景，按以下两步调整即可：

1. 调整CSS规则

给不同数值的term项单独定义背景色，示例如下：

/* 可保留div.term的容器样式，比如排版、边距等 */
div.term {
  display: flex;
  gap: 16px; /* 替代原有的 实现间距，更灵活可控 */
}

/* 单个term项的基础样式 */
.term-item {
  padding: 2px 6px;
  border-radius: 3px;
}

/* 对应不同数值的背景色规则，可按需扩展 */
.term-item.count-1 {
  background-color: mintcream;
}
.term-item.count-2 {
  background-color: coral;
}
.term-item.count-3 {
  background-color: lightgreen;
}

你之前新增的div.term.term-count-0是作用在整个容器上的，不符合单个term变色的需求，可删除或调整为上述结构。

2. 调整Jinja2模板代码

循环时取出元组的文本和数值两个值，给每个term单独套span元素并绑定对应类：

{% if terms|length > 1 %}
    <div class="term">
    {% for term_text, term_count in terms %}
        <span class="term-item count-{{ term_count }}">{{ term_text }}</span>
    {% endfor %}
    </div>
{% endif %}

补充说明：如果你的terms实际是字典列表（格式为[{"text":"a", "count":1}, ...]），只需把循环内的变量改为term.text和term.count即可适配。

内容的提问来源于stack exchange，提问作者marlon