Question

我尝试使用伪选择器设置我的网站样式，以在我的预告片中显示有限数量的元素（图像）。我一直在通过谷歌进行一些研究，找到了使用nth-child（n）最合适的方法。我无法找到为什么它对我不起作用。如果我使用nth-child（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;
}

Answer 1

您应该使用-表示法前面的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 =第3个元素

-1 + 3 = 2 =第二元素

-2 + 3 = 1 =第一元素

-3 + 3 = 0 =不匹配

在这里阅读完整，非常好的文章：http://css-tricks.com/how-nth-child-works/

试图在teasers中显示有限数量的图像

1 个答案: