样式A段逐行

Question

是否可以通过CSS逐行设置段落样式？假设第一行是绿色，第二行是红色，第三行是黄色。请注意，该段落是本机的，段落内没有使用其他标记。我只是想用CSS改变样式。

感谢。

Answer 1

CSS中有一个:first-line伪元素，可让您将段落的第一行设置为与其他行不同，因此您可以将第一行的颜色设置为绿色。但我不知道如何将第二行指定为与第三行不同，除非您添加某种类型的分隔符元素，例如span。

Answer 2

唯一可以在不更改标记的情况下执行此操作的方法是使用lettering.js。它是一个jquery插件，可以自动添加所需的标记，可以用CSS设置样式。

看看他们的维基，有逐行造型所需的例子。

此处还有更多信息：http://letteringjs.com/

Answer 3

除了Jacobs和emjay的回答。

HTML描述的是一个文档，即每个元素的语义。

一个段落可以有几行，但你需要告诉它。像：

<p class="line-by-line">
    <p>line 1 of paragraph</p>
    <p>line 2 of paragraph</p>
</p>

然后您可以使用n-th选择器：

p.line-by-line > p:nth-child(1) {
     color: green;
}

p.line-by-line > p:nth-child(2) {
     color: red;
}

检测语义而不在标记中定义它是棘手的，而不是HTML代表什么。拥有<p></p>并不意味着段落包含多少行。想象一下不同大小的屏幕和视口。