Question

我有一个图像网格，每行最多可包含10个图像。我想根据一行中包含的数量为所有图像应用唯一尺寸。

如何使用CSS选择器确定每行的图像数量？

<div>
    <img src="http://lorempixel.com/50/50" />
</div>     

<div>
    <img src="http://lorempixel.com/50/50" />
    <img src="http://lorempixel.com/50/50" />
</div>  

<div>
    <img src="http://lorempixel.com/50/50" />
    <img src="http://lorempixel.com/50/50" />
    <img src="http://lorempixel.com/50/50" />
</div>

... etc

Answer 1

通过合并:nth-child()，:nth-last-child()和~组合器，您可以实现此目标。

您需要两个选择器。第一个图像将选择第一个图像，只要它也是:nth-last-child()参数中指定的任何数字的最后一个子图像。要选择随后的其余图像，请将~添加到选择器（定位到第一个满足上述条件的图像后面的所有图像）。

因此，如果我想在每行3个时定位图像，我会使用：

div img:nth-child(1):nth-last-child(3),
div img:nth-child(1):nth-last-child(3) ~ img {
    border-radius: 50%;
}

小提琴：http://jsfiddle.net/vp1Ljm3o/

仅当父级包含X个子项时才应用样式？

1 个答案: