Question

我有一个无序列表<ul>，其中 15 ，30， 45 ，60， 75 ，90，。 ..等等中的元素。如果列表有 15/45/75/105 ，我想只隐藏最后一个元素，依此类推。我想用仅限CSS ，没有JQuery等来实现。

我尽力完成它并找到了这篇文章到目前为止Can CSS detect the number of children an element has?但无法开始工作。

我怎样才能完成这项工作？

Answer 1

将:last-child与nth-of-type结合使用：

ul > li:last-child:nth-of-type(15n):not(:nth-of-type(30n)) { display: none; }

Answer 2

使用:last-child和:nth-child：

ul :last-child:nth-child(30n+15)
{ 
    display: none; 
}

演示（在这里使用3/9/15，因为我不想粘贴太多的li）

ul :last-child:nth-child(6n+3) {
  background: red;
}

<ul>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
</ul>

<ul>
  <li>1st child</li>
  <li>1st child</li>
  <li>1st child</li>
</ul>

如果父有（15,45,75,105）元素，则仅隐藏最后一个元素（仅限CSS）

2 个答案: