如果存在超过一定数量，则隐藏列表项

Question

<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>
<ul class="parent">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>

我想要的是 / 在每个中<ul class="parent">：

如果count是：3 > li <=6隐藏<li>上面的3。如果是6 > li <=9，我们隐藏<li>上面的6。

事实上，我有一排元素。我总是想每行显示 3 个元素，但是当最后一行少于 3 个元素时，我想完全隐藏这一行。

此外，根据浏览器的大小（这似乎很容易），我想将因子数更改为每行 4 个元素。

这在纯 CSS 中似乎是不可能的，所以我转向 JS。

Answer 1

这在纯 CSS 中似乎是不可能的

已接受的挑战。

诀窍是级联nth计数，但前提是它x远离最后一个孩子。免责声明，我有点“欺骗”以排除某些元素，例如:not(:nth-child(5))，但这样做的好处是不使用诸如!important

.parent li:nth-child(n+4):nth-last-child(3):not(:nth-child(5)):not(:nth-child(6)) {
 display: none;
}
.parent li:nth-child(n+4):nth-last-child(-n+2):not(:nth-child(6)) {
 display: none;
}
.parent li:nth-child(n+4):nth-last-child(-n+1) {
 display: none;
}
.parent li:nth-child(n+7) {
 display: none;
}




/* just for styling */
body{ 
  display: flex;
  flex-flow: row wrap;
}

ul:before {
 content: "I started with " attr(data-count) " li's";
 background-color: lightgrey;
}

<ul class="parent" data-count="3">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
</ul>

<ul class="parent" data-count="4">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
</ul>
<ul class="parent" data-count="5">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
</ul>
<ul class="parent" data-count="6">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
</ul>
<ul class="parent" data-count="7">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
</ul>
<ul class="parent" data-count="8">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
</ul>
<ul class="parent" data-count="9">
  <li class="children">1</li>
  <li class="children">2</li>
  <li class="children">3</li>
  <li class="children">4</li>
  <li class="children">5</li>
  <li class="children">6</li>
  <li class="children">7</li>
  <li class="children">8</li>
  <li class="children">9</li>
</ul>

顺便说一下，您在 OP 中提出了许多问题，因此我选择为我认为您的问题的优先级提供解决方案。您可以相应地进行调整。