[分享]css3单双行不同的背景色

 在CSS3中，可以使用伪元素来实现单双行不同的背景色效果。 通过设置p元素的::before伪元素和::after伪元素的背景色来达到效果，其中偶数行的背景色为灰色，奇数行的背景色为白色。 具体代码...

 在CSS3中，可以使用伪元素来实现单双行不同的背景色效果。
通过设置p元素的::before伪元素和::after伪元素的背景色来达到效果，其中偶数行的背景色为灰色，奇数行的背景色为白色。
具体代码如下所示：

p:nth-child(odd)::before{
    content:"";
    display:block;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:#fff;
}
p:nth-child(odd)::after{
    content:"";
    display:block;
    height:50%;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color: #ccc;
}
<br>
p:nth-child(even)::before{
    content:"";
    display:block;
    height:50%;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:#ccc;
}
p:nth-child(even)::after{
    content:"";
    display:block;
    height:50%;
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    background-color:#fff;
} 

以上代码会将p元素中的奇数行背景色设为白色，偶数行背景色设为灰色，从而实现单双行不同的背景色效果。