html - css3 img 奇偶子

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 示例

之所以可行，是因为我们针对的是 ( even/ odd)div元素，而不是img元素。:nth-child没有在元素上工作的原因img是因为它们不是兄弟姐妹，不像div元素。