html - 如何选择第3、4、7、8、11里？

Question

在小屏幕尺寸上，我需要能够选择每 3 个元素。我正在使用 :nth-child(3n) 来完成这个。然后在桌面尺寸下，我需要能够覆盖它并选择第 3、4、7、8 和 11(最后)项。我怎样才能做到这一点？

谢谢!!

Answer 1

您希望从第三个开始以两个为一组来选择元素，两个被选中，两个未被选中。你可以只用两个选择器:

:nth-child(4n + 3) // select 3rd, 7th and 11th
:nth-child(4n + 4) // select 4th and 8th 

使用媒体查询来限制所需的大小:

@media (max-width: 767px) {
    li:nth-child(3n) {
        background: green;
    }
}

@media (min-width: 768px) {
    li:nth-child(4n + 3),
    li:nth-child(4n + 4) {
        background: red;
    }
}

<ul>
    <li>element 01</li>
    <li>element 02</li>
    <li>element 03</li>
    <li>element 04</li>
    <li>element 05</li>
    <li>element 06</li>
    <li>element 07</li>
    <li>element 08</li>
    <li>element 09</li>
    <li>element 10</li>
    <li>element 11</li>
</ul>