在段落中使用CSS替换行底纹(…不是表格）

Question

是否可以在行被包装的段落元素中进行交替的行底纹处理？这里没有:nth-child技术，因为我们只讨论一个元素。例如,如果我们有,

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
</p>

我的浏览器在“hello”和“world”之后执行“软返回”，导致上面的文本行看起来与上面的相同（至少当我在浏览器中呈现时是这样）。

我希望第0行和第2行的颜色（shadded）与第1行不同，就像使用tr:nth-child(even)创建具有交替颜色行的表时在表中的情况一样。

这可能吗？或者，是否有一种使用不同元素的实用替代方法（而不需要自己将段落切碎并贴在表格中！）

Answer 1

使用重复渐变为它们着色：

null

p {
  line-height:1.2em; /* height of one line */
  color:transparent;
  background:repeating-linear-gradient(180deg, red 0 1.2em,grey 0 2.4em);
  -webkit-background-clip:text;
  background-clip:text;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- hello
row 4 -- world
and so on
</p>