Question

我在下面有一些示例HTML标记，我正在寻找的是使用第n个子配方仅在媒体查询设置为特定屏幕大小时仅显示（并且仅特定）第7个孩子。可以这样做吗？或者我是否更好地隐藏了图像课的所有孩子，将第7个孩子定位为另一个第n个儿童食谱？

<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结合使用：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

@media screen and (max-width: 767px) {
  .image:nth-child(7) {
    background-color: green;
  }
}

＆＃13;

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

＆＃13;

这是因为您要隐藏除子号码以外的所有内容 7

＆＃13;

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

＆＃13;

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

＆＃13;

第n个孩子的食谱

2 个答案: