CSS3正在选择最后一个子元素

Question

这个CSS规则突出显示了最后一个td元素，即使它不应该。

<tbody>
    {% for thread in object_list %}
    <tr id="unanswered_threads">
            {% load staticfiles %}
            <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.thread_id }}</td>
            <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.subject }}</td>
            <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.latest_post_date }}</td>
            <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.author_username }}</td>
            <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.last_modified_by }}</td>
             <td onclick="gotoLink('{{ thread.url }}');" class="urlLink">{{ thread.assigned_user }}</td>
            <td class="action_button"><a href="/assign_thread/{{ thread.thread_id }}"><img src="{% static 'img/icon_red.gif' %}"></img></a></td>
    </tr>
    {% endfor %}
</tbody>

CSS：

#unanswered_threads:hover td:not(last-child) {
    cursor: pointer;
    background-color: #2a6496 !important;
}

这个CSS读取的方式，  “选择任何不是first-child元素的td元素，它是id属性等于unanswered_threads且处于悬停状态的任何元素的后代。”

Answer 1

您在last-child

之前错过了冒号

#unanswered_threads:hover td:not(:last-child) {
    cursor: pointer;
    background-color: #2a6496 !important;
}

Demo

虽然看起来你想要做的事情的逻辑有点奇怪，但你可能想把它改成：

#unanswered_threads td:not(:last-child):hover {
    cursor: pointer;
    background-color: #2a6496 !important;
}

Demo