如何选择第3，第4，第7，第8和第11李？

Question

在小屏幕尺寸上，我需要能够选择每个第三项。我正在使用: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>

Answer 2

您需要两个媒体查询 - 一个用于小屏幕，另一个用于大屏幕。

您还应该使用mixin来获得更多可维护的代码。

@mixin liStyles{ 
    color: red; 
    font-size 24px; 
} 

/* phones */ 
@media screen and (max-width: 767px){ 
    li:nth-child(3n){ 
    @include liStyles; 
    } 
} 

/* desktop */ 
@media screen and (max-width: 767px){ 
    li:nth-child(3), li:nth-child(4), li:nth-child(7), li:nth-child(8), li:nth-child(11){ 
    @include liStyles; 
    } 
}