css - 第N个孩子奇偶不一起工作

Question

我试图通过使元素基于奇数或偶数稍微旋转来添加一些随机化。

见 JS 小提琴

本质上，有一种样式应用于odd和even使用nth-child它应该使每个其他样式以不同的角度旋转，但它似乎不适用第二个......

ul.polaroidGrid li .polaroid:nth-child(even){
    transform: rotate(-1deg) ;
-webkit-transform: rotate(-1deg) ;
-moz-transform: rotate(-1deg) ;
-o-transform: rotate(-1deg) ;
-ms-transform: rotate(-1deg) ;
}

ul.polaroidGrid li .polaroid:nth-child(odd) {
    transform: rotate(1deg) ;
    -webkit-transform: rotate(1deg) ;
    -moz-transform: rotate(1deg) ;
    -o-transform: rotate(1deg) ;
    -ms-transform: rotate(1deg) ;

}

一项的示例 HTML

<li>
        <div class="polaroid">
        <img src="images/makers/getbetter.jpg" />
        <span class="polaroidTitle">Get Better Clothing</span>
        <a href="http://www.getbetterclothing.com/" target="_blank">getbetterclothing.com</a>
        </div>
        <p>Clothing which draws inspiration from childhood toys and nature using fun illustrative styles.</p> 
    </li>

Answer 1

每个.polaroid都是其父母的第一个也是唯一的孩子，所以他们都是奇怪的。

你想要奇数和偶数li。

Answer 2

我相信，那一定是这样的：

ul.polaroidGrid li:nth-child(even) .polaroid{

}

ul.polaroidGrid li:nth-child(odd) .polaroid {

}