樣式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>並不意味着該段落包含多少行。想象不同尺寸的屏幕和視口。