时间戳

首页 > 解决方案 > 限制一页上特定 div 类的数量（wordpress）

html - 限制一页上特定 div 类的数量（wordpress）

问题描述

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

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

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

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

标签： htmlwordpresscsscss-selectors

解决方案

如果它们都具有相同的父元素，并且该父元素中没有其他子元素，则可以将: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。

推荐阅读