列表项具有交替颜色的列表答案

【问题标题】：Lists with alternating colours for the list items列表项具有交替颜色的列表
【发布时间】：2019-02-15 08:28:45
【问题描述】：

我正在制作一个待办事项应用程序，其中包含 2 个列表：待办事项和已完成项目。我想要这两个列表的交替背景颜色。添加项目时，一切正常。

但是，一旦我将第 2 项移到已完成列表中，我就得到了：

我的代码如下：

HTML：

<div class = "ItemList">
    {% for todo in todos %}
    <div>
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        <div>
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
        </div>
    {% endfor %}
</div>

CSS：

div.ItemList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.ItemList> div:nth-of-type(even){
    background-color: #eaecee;
}

div.CompletedList> div:nth-of-type(odd){
    background-color: #adb6be;
}

div.CompletedList> div:nth-of-type(even){
    background-color: #eaecee;
}

如何使列表在修改后以交替颜色显示？两个列表都应该以颜色#adb6be 开头，然后交替出现。我尝试将它们包含在同一个类元素中，但这也不起作用。任何帮助将不胜感激。

【问题讨论】：

如果填充给你的问题可能会解决

标签： css html

【解决方案1】：

这是由于您输出 HTML 的方式，对于每个列表，您正在生成所有项目，因此即使内部没有内容，第 n 个子项仍将应用于 DIV。您需要调整 HTML：

<div class = "ItemList">
    {% for todo in todos %}
        {% if todo.complete == False %}
            <div class = "item">
                <span id="editable"> {{ todo.todoitem }} </span>
                <div class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Done" class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<h3 style="text-align: center;">Completed Items</h3>
<div class = "CompletedList">
    {% for todo in todos %}
        {% if todo.complete == True %}
            <span class = "completed">
                <strike> {{ todo.todoitem }} </strike>
                <span class = "button">
                    <a href = "{{ url_for('complete',idx=todo.id) }}"> <input type = "Button" value = "Move to Incomplete"class="button2"></a>
                    <a href = "{{ url_for('delete',idx=todo.id) }}"> <input type = "Button" value = "Remove" class="button2"> </a>
                </span>
            </span>
        {% endif %}
    {% endfor %}
</div>

【讨论】：