我怎样才能在帖子列表中只显示第三张图片？答案

【问题标题】：How can I only show every third image in the post list?我怎样才能在帖子列表中只显示第三张图片？
【发布时间】：2020-03-24 04:29:43
【问题描述】：

我的主页上目前有一个帖子列表，其中包含我网站上的最新帖子。现在每个帖子都显示图像，但我只想显示第 1、4、8 个图像等。我尝试使用子标签，但所有图像似乎都在使用 (1)。有什么解决办法吗？

你可以看到它here。

【问题讨论】：

标签： html wordpress css-selectors

【解决方案1】：

假设您的主页 HTML 如下所示：

<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>
<div class="post">
  <img class="post-thumbnail" alt=""/>
</div>

您有几个选项可以隐藏其中的一些：

PHP => 如果循环索引达到 4 的倍数 ($index % 4 === 1)，则不会回显图像。最佳解决方案恕我直言，您不需要的图像不会加载到 DOM 中，也不会被请求。
CSS => 将隐藏 img 标签:nth-of-type。但是，我认为这不是最好的选择，因为您渲染标签，加载它们，然后隐藏它们。

.post img { 显示：无； } .post:nth-of-type(4n) { 显示：块； }

【讨论】：

【解决方案2】：

您必须将nth-of-type 应用于帖子本身（即article 标记），并为图像添加一个选择器，这样就类似于

article:nth-of-type(2n) .attachment-post-thumbnail,
article:nth-of-type(3n) .attachment-post-thumbnail,
article:nth-of-type(4n) .attachment-post-thumbnail {
  display: none;
}

在每 2、3 和 4 篇文章中隐藏图像

【讨论】：