css3 img odd＆amp;即便是孩子

Question

我想要定位图像，并给出奇数出现不同的旋转比较偶数和我使用以下的HTML和CSS但它不起作用。任何人都可以让我知道我在这里失踪了什么：

<div id="blocks" style="overflow-y: scroll; height: 200px; padding: 20px 0 0 20px;">

<div style="height: 150px"><p><img src="mike.jpg" align="left" class="students">
<font color="red">Mike</font>"hello from UK." 
</p></div>


<div style="height: 150px"><p><img src="jack.jpg" align="left" class="students">
<font color="red">Jack</font> 
"Hello from US"
</p></div>

</div>

CSS：

#blocks img:nth-child(even) {

transform:rotate(5deg);

}
#blocks img:nth-child(odd) {

transform:rotate(5deg);

}

Answer 1

使用类似的东西：

#blocks div:nth-child(even) img {
    /* styling */
}

#blocks div:nth-child(odd) img {
    /* styling */
}

jsFiddle example

之所以有用，是因为我们定位的是{even / odd）div元素，而不是img元素。 :nth-child无法处理img元素的原因是因为它们不是兄弟姐妹，与div元素不同。