Question

我不知道如何在CSS中说出来。例如，如果我有一个包含10个imgs的div类，但我只希望显示前三个。我知道那里有类似

的东西

.divclass:nth-of-type(n) {
    display:none;
}

但我不想将此代码粘贴七次并更改n。我希望它能说出像＃34;在前三个＆＃34;之后不要显示任何图像。因此，在我添加11,12,13,14 ......图像后，它仍然只显示前三个。

谢谢！

Answer 1

您可以使用以下内容：

img:nth-of-type(n+4) {
    display:none;
}

<div class="test">
  <img src="http://placehold.it/101x100"/>
  <img src="http://placehold.it/102x100"/>
  <img src="http://placehold.it/103x100"/>
  <img src="http://placehold.it/104x100"/>
  <img src="http://placehold.it/105x100"/>
  <img src="http://placehold.it/106x100"/>
  <img src="http://placehold.it/107x100"/>
  <img src="http://placehold.it/108x100"/>
  <img src="http://placehold.it/109x100"/>
  <img src="http://placehold.it/110x100"/>
</div>

<强>解释
n是以0开头的计数。因此，第一个规则是(0 + 4 = 4) => img:nth-of-type(4)，第二个规则是(1 + 4 = 5) => img:nth-of-type(5)，依此类推。

显示：无;从一定数量开始？

1 个答案: