用css着色行[重复]答案

【问题标题】：Coloring rows with css [duplicate]用css着色行[重复]
【发布时间】：2023-03-10 19:58:01
【问题描述】：

有什么办法不使用JS，只用CSS给行上色吗？

例子：

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

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

【问题讨论】：

可能重复stackoverflow.com/questions/5080699/…
几乎没有复制。我的每一行都没有 html 元素标签。就在文章的开头和结尾。
你只是在使用<p>标签并让它们自然地运行到下一行吗？
我不使用任何东西来打破界限。 div的最大宽度打破了线条。
恐怕纯 CSS 无法实现，我们能做的最接近的事情是使用 ::first-line 伪元素仅更改第一行段落的颜色：@987654322 @

标签： html css

【解决方案1】：

试试这个

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

【讨论】：

Tr?我没有使用表格，也没有在每一行中都有 html 元素标签。

【解决方案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/

【讨论】：

【解决方案3】：

您可以通过使用具有两种不同颜色的图像来实现这一点。

将图像设置为段落标签的背景并将其拉伸为 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/

【讨论】：

这是最接近的东西。