css - 第 n 个子选择器

Question

在此页面上，我想将每张艺术家照片交替向左和向右旋转。我用来执行此操作的选择器是

.artistsList img:nth-child(2n+1) {
    -moz-transform: rotate(-4deg);
}

.artistsList img:nth-child(2n) {
    -moz-transform: rotate(4deg);
}

但是由于某种原因，第一条规则被应用于所有图像，所以它们都被旋转到左边。

Answer 1

这是因为您拥有的 HTML 结构。每个图像都是其父级的第一个子级。这些选择器应该更适合您：

.artistsList div.artistEntry:nth-child(odd) img { ... }
.artistsList div.artistEntry:nth-child(even) img { ... }