html - 带有第 n 个子项的 css3 旋转不能按预期工作

Question

1. 我有一个留言簿。
2. 我想每 1 个帖子(-0.7 度)和每 2 个帖子(0.7 度)旋转一次
   
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.. */
}