Css 尝试在摘要中显示有限数量的图像

我尝试使用伪选择器来设计我的网站，以在我的摘要中显示有限数量的元素（图像）。我通过谷歌做了一些研究，找到了使用第n个child（n）最合适的方法。但是我不知道为什么它对我不起作用。如果我使用第n个子项（n+5），它应该显示前四个图像，其他所有图像都不应该显示。它根本不起作用。我认为这是个好办法还是问题更复杂

代码如下所示：

.node-teaser .field-type-image  img {
    float: left;
    width: 24.6%;
    padding:0.2%;
}

.node-teaser .field-type-image img:nth-child(n+5){
    display: none;
}

---

您应该在

n

符号前面使用

-

（负号）来仅指定一些元素

在您的情况下，如果只希望显示4个元素：

.node-teaser .field-type-image img{
    display: none;
}

.node-teaser .field-type-image img:nth-child(-n+4){
    display: block;
}

为什么?

使用“-n”值似乎有点奇怪，因为如果最终结果是 负数没有匹配项，因此需要将其添加到等式中以 把它恢复为阳性。事实证明，这是一个相当聪明的方法 技术。您可以使用它来选择“前n个元素” “-n+3”：

-0+3=3=第三个元素

-1+3=2=2个元件

-2+3=1=1个元件

-3+3=0=不匹配

请在此处阅读完整、非常好的文章：