条件css显示限制项目

Question

说我有10 (find-index L 'd) ，如何通过使用css隐藏另外5个将它们限制为5？我必须像nth-child一样做5次课吗？可以在css中使用条件吗？由于<p>的数量是动态的，因此可以是20,30或100。

Answer 1

您可以使用nth-child(n+x)选择器，例如：

p:nth-child(n+6) {
  display:none;  
}

这是一个fiddle，展示红色为6 +

n+6是公式方程an+b的缩写（请参阅specs和mdn），对于“n”的每个值都是迭代的，这些值是＆gt; = 0和其中a和b是整数＆gt; 0。所以在这种情况下完整的公式是等价的：

1n+6

对于n的值为0,1 ..将给出：6,7 ...匹配第6个和更高的标签。

通过修改b，我们可以创建间隔，例如：

2n+6

对于n的值为0,1现在产生6,8,10等等，从第6个开始有效地匹配每个其他p标记。

Answer 2

如果您对jquery开放，可以使用：$('p:gt(5)').hide();，它会在第5个元素之后隐藏所有<p>个元素。

Answer 3

编辑：添加到已接受的答案。

定义范围 - 选择2 to 10之间的元素。

:nth-child(n+2):nth-child(-n+10)

选择该范围内的偶数元素。

:nth-child(n+2):nth-child(-n+10):nth-child(even)

选择该范围内的奇数元素。

:nth-child(n+2):nth-child(-n+10):nth-child(odd)

公式an+b的评估遵循Operator Precedence，其值始终为非负整数。

注意：您不能在该公式中划分或添加小数。