Question

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

基本上有一种风格应用于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 s。

Answer 2

我相信，必须是这样的：

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

}

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

}

第N个孩子奇怪甚至不一起工作

2 个答案: