Question

在小屏幕尺寸上，我需要能够选择每第3个项目。我正在使用+来完成此任务。然后在桌面大小我需要能够覆盖它并选择第3，第4，第7，第8和第11（最后）项目。我怎样才能做到这一点？

谢谢！

Answer 1

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

您还应该使用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;
  }
}

Answer 2

您希望从第三组开始选择两个组，两个选中，两个未选中。您只能使用两个选择器：

: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>

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

2 个答案: