限制一页上特定 div 类的数量（wordpress）答案

【问题标题】：Limit amount of specific div class on one page (wordpress)限制一页上特定 div 类的数量（wordpress）
【发布时间】：2019-04-12 03:09:35
【问题描述】：

是否有解决方案来限制页面上特定类的 div 数量？

我有一个扩展程序，其中添加了 <div class="vc-box"> 的内容。

假设我在一页上有八个<div class="vac-box"> 实例。

现在我希望只有三个可见的实例。其余的必须隐藏。

【问题讨论】：

标签： html wordpress css css-selectors

【解决方案1】：

如果它们都具有相同的父元素并且该父元素中没有其他子元素，则可以将:nth-child(n) 选择器与display: none 结合使用。要影响从 4 岁开始的所有孩子，您可以使用:nth-child(1n+4)，如下所示。

.vac-box:nth-child(1n+4) {
  display: none;
}

<div class="container">
  <div class="vac-box">1</div>
  <div class="vac-box">2</div>
  <div class="vac-box">3</div>
  <div class="vac-box">4</div>
  <div class="vac-box">5</div>
  <div class="vac-box">6</div>
  <div class="vac-box">7</div>
  <div class="vac-box">8</div>
</div>

但是，如果这些 DIV 位于不同的父元素中，或者它们之间还有其他子元素，则仅使用 CSS 无法做到这一点 - 您需要 Javasript。

【讨论】：

【解决方案2】：

您可以尝试使用 nth-child 选择器来隐藏特定的 div： https://www.w3schools.com/cssref/sel_nth-child.asp

【讨论】：