如何用Jinja2/Python根据子元素值修改父元素样式？

核心思路 #

利用Jinja2的模板渲染能力，在生成<tr>元素时提前提取该行的状态值（StandBy/Active/Paused/Done），直接给<tr>添加对应的类名，之后通过CSS直接选中这些类的行设置背景色——完全不需要依赖:has()选择器，也不用保留单独给单元格加样式的冗余代码。

修改后的Jinja2模板代码 #

<table class="table">
    {% for dict_item in data | sort(attribute='name') %}
        {% set row_status = None %}
        <!-- 先遍历当前行的所有值，定位状态字段 -->
        {% for key, value in dict_item.items() %}
            {% if value in ["StandBy", "Active", "Paused", "Done"] %}
                {% set row_status = value.lower() %}
            {% endif %}
        {% endfor %}
        <!-- 给<tr>绑定对应的状态类 -->
        <tr class="table__row {% if row_status %}row-{{ row_status }}{% endif %}">
            {% for key, value in dict_item.items() %}
                <!-- 无需再给<td>加状态类，直接渲染内容即可 -->
                <td class="table__cell">{{ value }}</td>
            {% endfor %}
        </tr>
    {% endfor %}
</table>

对应的CSS代码 #

/* 直接通过行的状态类设置整行背景色 */
.table__row.row-active {
    background-color: #5cfb4b;
}

.table__row.row-standby {
    background-color: #e5e5e5;
}

.table__row.row-paused {
    background-color: #f6FB4B;
}

.table__row.row-done {
    background-color: #fe6464;
}

关键说明 #

1. 模板通过内层循环先找到当前行的状态值，转成小写后拼接成类名（比如Active转为row-active），直接绑定到<tr>上。
2. CSS使用最基础的类选择器就能选中整行，所有浏览器都支持这种写法，彻底解决兼容性问题。
3. 原来给<td>加的standby/active等类可以完全删除，不需要保留冗余的单元格样式。

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