2

我尝试使用伪选择器为我的网站设置样式，以在我的预告片中显示有限数量的元素（图像）。我一直在通过谷歌做一些研究，找到了使用 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;
}
4

1 回答 1

3

您应该在-符号前面使用（负号）n来仅指定一些元素。

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

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

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

为什么？

使用“-n”值似乎有点奇怪，因为如果最终结果为负，则不匹配，因此您需要添加到等式以使其再次恢复为正。事实证明，这是一种相当聪明的技术。您可以使用它通过“-n+3”选择“前 n 个元素”：

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

-1 + 3 = 2 = 第二个元素

-2 + 3 = 1 = 第一个元素

-3 + 3 = 0 = 不匹配

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

于 2013-04-03T16:12:18.090 回答