css - N 番目の子の奇数と偶数は一緒に動作しません

Question

奇数または偶数に基づいて要素をわずかに回転させることで、ランダム化を追加しようとしています。

JS フィドルを参照してください

基本的に、適用しoddてeven使用するスタイルがあり、 nth-child1 つおきに異なる角度で回転させる必要がありますが、2 番目のものは適用されないようです...

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) ;

}

1 つのアイテムの 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の s が必要です。

Answer 2

私は、それは次のようなものでなければならないと信じています:

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

}

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

}