使用nth-child的css3旋转无法按预期工作

Question

1. 我有留言簿。
2. 我想每第1个帖子（-0.7deg）和第2个.post（0.7deg）轮换
3. .chain只有背景图片。
   
4. 当没有.chain div时，它适用于.post：nth-​​child（2n + 1）
5. 有了这个css，我只能朝同一个方向旋转。
6. 我尝试了一切，但它不起作用。请帮帮我。



html：

<form></form>    
<div class="chain"></div>
<article class="post">
   <h3>Peter Parker</h3>
   <span class="time">2014.03.17 18:53</span>
   <span class="message">This is a nice page.</span>
</article>
<div class="chain"></div>
<article class="post">
   <h3>John Smith</h3>
   <span class="time">2014.03.17 18:00</span>
   <span class="message">Hi! My name is John</span>
</article>
...

css：

.post{
    border: 30px solid transparent;
    border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
    border-width:20px 20px 20px 20px;
    -moz-border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
    -webkit-border-image:url("stb/border.png") 45 45 45 45 repeat stretch;
    border-image-outset: 10px;
    background-color:#fffcd6;
    text-align:center;  
}
.chain{
    margin:0 auto;
    height:30px;
    width:30px;
    min-width:30px;
    min-height:30px;
    background: url('stb/lanc.png');
    background-repeat: repeat-y;
    background-position: center center;
}
.post:nth-child(4n+3) .post:nth-child(4n+4){
    -ms-transform:rotate(0.7deg);
    -webkit-transform:rotate(0.7deg);
    transform:rotate(0.7deg);
}
.post:nth-child(4n+1) .post:nth-child(4n+2){
    -ms-transform:rotate(-0.7deg);
    -webkit-transform:rotate(-0.7deg);
    transform:rotate(-0.7deg);
}

我也试过这个：

.chain:nth-child(odd) .vk:nth-child(odd){
    -ms-transform:rotate(0.7deg); 
    -webkit-transform:rotate(0.7deg);
    transform:rotate(0.7deg);
}

Answer 1

选择器之间需要逗号。您使用的是descendant combinator。

EXAMPLE HERE

.post:nth-child(4n+3), .post:nth-child(4n+4){
/*                   ^                      */
    -ms-transform:rotate(0.7deg);
    -webkit-transform:rotate(0.7deg);
    transform:rotate(0.7deg);
}
.post:nth-child(4n+1), .post:nth-child(4n+2){
/*                   ^                      */
    -ms-transform:rotate(-0.7deg);
    -webkit-transform:rotate(-0.7deg);
    transform:rotate(-0.7deg);
}

您可以简化此操作并使用:nth-child(even) / nth-child(odd)。但是，由于<div class="chain"></div>元素，这不起作用。因此，您可以使用伪元素（:before / :after）替换它们，如下所示：

EXAMPLE HERE

.post:nth-child(even) {
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
}
.post:nth-child(odd) {
    -ms-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
    transform:rotate(-2deg);
}
.post {
    /* other styling.. */
    position:relative;
}
.post:after {
    content:'';
    position: absolute;
    height: 30px;
    width: 30px;
    background: url('//placehold.it/10x200');
    background-repeat: repeat-y;
    background-position: center center;
    left: 50%;
    top: 100%;
    margin-left: -15px; /* Half the width.. */
}