css - 你能用nth-child选择最后3个项目并选择奇数或偶数吗？

Question

设想

比如说我有以下内容：

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9

<ul>
    <li>1</li><li>2</li><li>3</li>
    <li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li>
</ul>

我有奇数和偶数的默认背景：

li:nth-child(even) {
    background: #ff0000;
} 

li:nth-child(odd) {
    background: #00ff00;
}

问题

但我想为最后 3 个结果应用不同的背景，也取决于它们是偶数还是奇数：

li:nth-last-child(-n + 3)(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3)(odd) {
    background: #ffff00;
}

这可能吗？

Answer 1

您还需要重复该:nth-child部分：

li:nth-last-child(-n + 3):nth-child(even) {
    background: #0000ff;
}

li:nth-last-child(-n + 3):nth-child(odd) {
    background: #ffff00;
}

此外，根据您有多少元素，:nth-child(odd)并且:nth-last-child(odd)（以及它们的even对应物）可能会选择不同的元素。