html - 第 n 个子食谱

Question

我在下面有一些示例 HTML 标记，我想要做的是使用第 n 个子配方在媒体查询设置为特定屏幕大小时仅显示(特别是仅)第 7 个子。这可以做到吗？或者我是否更好地隐藏图像类的所有 child ，以第 7 个 child 为目标，使用另一个第 n 个 child 食谱？

<div class = "imageCollection">
<ul class="images">
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
</ul>
</div>

Answer 1

您可以将 not() 与 nth-child 结合使用:

.images li:not(:nth-child(7)) {
  display:none;
}

<div class = "imageCollection">
<ul class="images">
    <li class="image">1</li>
    <li class="image">2</li>
    <li class="image">3</li>
    <li class="image">4</li>
    <li class="image">5</li>
    <li class="image">6</li>
    <li class="image">7</li>
    <li class="image">8</li>
    <li class="image">9</li>
</ul>
</div>