html - 限制一页上特定 div 类的数量(wordpress)

Question

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

我有一个添加了 <div class="vc-box"> 的扩展里面有内容。

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

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

Answer 1

如果它们都具有相同的父元素，并且该父元素中没有其他子元素，则可以结合使用 :nth-child(n) 选择器和 display : 无。要影响从 4 号开始的所有 child ，您可以使用 :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。