时间戳

首页 > 解决方案 > 列表项具有交替颜色的列表

css - 列表项具有交替颜色的列表

问题描述

我正在制作一个待办事项应用程序，其中包含 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 开头，然后交替出现。我尝试将它们包含在同一个类元素中，但这也不起作用。任何帮助将不胜感激。

标签： csshtml

解决方案

这是由于您输出 HTML 的方式，对于每个列表，您正在生成所有项目，因此即使内部没有内容，nth-child 仍将应用于 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>

推荐阅读