仅当父级包含 X 数量的子级时才应用样式？

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() 和 ~ 组合器，您可以完成此操作。

你需要两个 selector。第一个将 select 第一个图像，只有当它也是 :nth-last-child() 的参数中指定的任何数字的最后一个子图像时。要 select 后面的其余图像，请将 ~ 添加到 selector（它针对满足上述条件的第一张图像之后的所有图像）。

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

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

Fiddle: http://jsfiddle.net/vp1Ljm3o/

仅当父级包含 X 数量的子级时才应用样式？

Applying styles only when parent contains X amount of children?

css

css-selectors