Question

我知道使用JavaScript非常容易。例如，如果我想隐藏所有50岁以后的孩子，我只需要这样做：

$("#container").find('div').each(function(){
  if ($(this).index() > 50) $(this).hide();
})

但是可以使用纯CSS 吗？

注意：

儿童总数不是固定的。它可能会更改（通过其他JavaScript代码
我只需要支持Chrome，因此无需考虑其他浏览器
我无权访问HTML DOM本身（因为我正在构建Chrome扩展程序）

更新：

对不起，我想对a to All the next（最后一个）的孩子们隐藏起来。我已经编辑了我的问题。不是来自a~b。

Answer 1

.container div:nth-child(n+51) { display:none; }

n是循环编号，51是偏移量，因此将从第51个项目开始，然后每1个项目重复一次。

Answer 2

另一种想法是使用~选择器，以便将所有元素隐藏在特定元素之后：

.container div:nth-child(51) ~ * {
   display:none;
}

这里是一个例子：

.container div:nth-child(5) ~ * {
  display: none;
}

.container div {
  height:20px;
  width:20px;
  display:inline-block;
  border:1px solid;
  background:red;
}

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

是否可以在纯CSS中自动隐藏第（〜MAX）个子元素的所有范围？

2 个答案: