用css着色行

Question

有没有办法在不使用JS的情况下对行进行着色，只有CSS？

示例：

<p>  First row row row row ro...... row
     second row row row  .......... row
     third row row orw row row..... row
</p>

所以每个偶数/奇数行都会被着色。 行没有标记！

Answer 1

您可以使用两种不同颜色的图像来实现这一目标。

将图像设置为段落标记的背景，并将其拉伸至100％宽度和双倍行高。

p
{
    background-image: url('http://s14.directupload.net/images/140912/kdn4j3iz.png');
    background-size: 100% 3em;
    font-size: 1em;
    line-height: 1.5em;
}

使用的背景图像看起来像这样（原始尺寸为1px x 2px）：

结果应如下所示：

JSFiddle上的演示：http://jsfiddle.net/2fmac6kp/2/

Answer 2

我设法使用剥离的背景来解决您的问题。没有标记的行！唯一的问题是你必须设置行高。没什么大不了的！

请参阅以下内容：

HTML：

<p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut maximus tortor, in elementum arcu. Vivamus bibendum rutrum arcu, vitae feugiat risus dignissim non. Duis quis mauris elit. Donec non sem eleifend purus molestie semper. Mauris bibendum nunc vitae ipsum tempor, sed gravida nibh gravida. Proin nec diam consequat, tristique leo consectetur, hendrerit dui. Nulla quam augue, suscipit a suscipit et, eleifend nec tellus. Nunc ultrices in tortor vel condimentum. Fusce lectus massa, ullamcorper at aliquet tincidunt, efficitur at metus. Morbi pharetra lorem vel ultrices varius. Nunc ut mollis lectus. Proin vehicula nisl in lectus tincidunt, mattis ullamcorper lectus congue. Integer tempus tortor sed tincidunt semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id viverra risus, a sagittis ex.     
</p>

CSS：

p {
    /* credits : http://lea.verou.me/demos/css3-patterns.html */
    background-color: #0ae;
    background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);

    background-size: 4em 4em; /* should be 2x line-height */
    line-height: 2em;
    padding-left: 4px;
}

请尝试此演示：

http://jsfiddle.net/dh5xt3gq/

Answer 3

试试这个

tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}