如何在特定的文本行上选择和应用样式？像CSS pseudo-element :first-line一样，但是我想选择任何一行，而不仅限于第一行。
似乎仅通过使用CSS不可能完成。反正我不介意JS解决方案。
更新：
嗯，实际上这只是出于兴趣。我正在尝试实现诸如突出显示段落的每一偶数行（以提高可读性，就像每个人对表行所做的事情一样）...
将文本预先格式化为：
<p>
<span class='line1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </span>
<span class='line2'>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </span>
<span class='line3'>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </span>
<span class='line4'>ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </span>
<span class='line5'>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur </span>
<span class='line6'>sint occaecat cupidatat non proident, sunt in culpa qui officia </span>
<span class='line7'>deserunt mollit anim id est laborum.</span>
</p>
...对我来说还可以，但是如何知道在哪里拆分呢？即使给出了段落的宽度，仍然很难确定...
有趣。您可以使用JavaScript执行类似操作：
$(function(){
var p = $('p');
var words = p.text().split(' ');
var text = '';
$.each(words, function(i, w){
if($.trim(w)) text = text + '<span>' + w + '</span> ' }
); //each word
p.html(text);
$(window).resize(function(){
var line = 0;
var prevTop = -15;
$('span', p).each(function(){
var word = $(this);
var top = word.offset().top;
if(top!=prevTop){
prevTop=top;
line++;
}
word.attr('class', 'line' + line);
});//each
});//resize
$(window).resize(); //first one
});
[基本上，每当窗口调整大小时，我们都会用跨度来包装每个单词，并根据跨度的位置添加一个类。我敢肯定它可以更有效地完成，但可以作为概念证明。当然，对于偶数/奇数行，您可以简化代码。
极端情况：我没有在类更改单词的大小或宽度的地方进行测试。它可能最终会非常错误。
这里正在执行：https://jsbin.com/piwizateni/1/edit?html,css,js,output
如果每行都是单独的<li>或<p>，则可以使用CSS进行选择。
：nth-child（N）
取自sitepoint.com，可在Opera 9.5 +，Safari 4 +，FF3.5 +中使用
描述
此伪类根据元素在父元素的子元素列表中的位置进行匹配。伪类接受参数N，可以是关键字，数字或形式为an + b的数字表达式。有关更多信息，请参见了解:nth-child伪类表达式。
如果N是数字或数字表达式，：nth-child（N）匹配文档树中前N-1个兄弟姐妹的元素。
以下示例选择器是等效的，并且将匹配奇数表行：
tr:nth-child(2n+1) {
⋮ declarations
}
tr:nth-child(odd) {
⋮ declarations
}
此示例选择器将匹配任何表的前三行：
tr:nth-child(-n+3) {
⋮ declarations
}
此示例选择器将匹配其父元素的第一个子元素的任何段落：
p:nth-child(1) {
⋮ declarations
}
当然，这等效于选择器p：first-child。
示例
此示例选择器将匹配奇数表行：
tr:nth-child(odd) {
⋮ declarations
}
您也可以使用jQuery。
我发现了一个名为lining.js的JavaScript库，可以在有兴趣的情况下提供帮助。它启用如下CSS语法：
<style>
.poem .line[first] { /* `.poem::first-line`*/ }
.poem .line[last] { /* `.poem::last-line` */ }
.poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
.poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
.poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>
（Github）
如果我对您的理解正确，您希望能够通过CSS将样式应用于文档中的特定行。例如：将第5行设为粗体。
这是不可能的-CSS不是面向行的，而是面向DOM元素的。因此，要实现您的目标，您必须将行包装在（或 CSS不面向行，因为行号是虚假的：行号将根据屏幕分辨率，浏览器窗口的宽度，浏览器定义的默认字体等而变化。因此，基于行号的样式将为您提供可疑的结果。
如果将CSS限制为文本和背景颜色，则可以使用CSS来实现此效果：
body {
font-size: 16px;
line-height: 20px;
}
.text {
background: linear-gradient(to bottom, crimson 20%, coral 20% 40%, seagreen 40% 60%,
dodgerblue 60% 80%, mediumslateblue 80%);
background-size: 100px 100px;
background-position: top left;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.background {
background: linear-gradient(to bottom, white 50%, #eee 50%);
background-size: 100px 40px;
background-position: top left;
}<div class="background">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio.
Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere ac, pharetra id justo. Mauris odio est, imperdiet eget sollicitudin non, aliquet in nulla. Aliquam erat volutpat. Pellentesque bibendum tellus nibh. Ut consequat sem sit amet quam
tristique ut tempor massa rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum.
Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere ac, pharetra id justo. Mauris odio est, imperdiet eget sollicitudin non, aliquet in nulla. Aliquam erat volutpat. Pellentesque bibendum tellus
nibh. Ut consequat sem sit amet quam tristique ut tempor massa rhoncus.
</div>
</div>background创建一个linear-gradient，以获得linear-gradient的效果。line-height，这将简化示例。20px。如果我们有5条彩色条纹并且每条线为background-size，则背景高度应为20px（宽度在这里无关紧要）。100px。这样会将背景绘制为与文本内容相同的形状。我们仍然需要设置background-size，因为没有它，文本仍会在背景上涂成黑色。