Javascript 如何选择第n行文本（CSS/JS）

如何在特定的文本行上选择和应用样式？ 喜欢，但我想选择任何一行，不限于第一行

似乎仅仅使用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>

Lorem ipsum dolor sit amet，Concetetur Adipising Elite，sed do
临时性的劳动和生产许可证。乌特埃尼姆酒店
最低限度的风险是，在实验室进行的实习
ex ea commodo consequat。两人或两人在雷普雷亨德瑞特
你的头发上有一层厚厚的绒毛，这是一种不可剥夺的权利。例外
圣奥卡塔不可轻率行事，必须承担责任
这是我的劳动。

---

…对我来说没关系，但怎么知道在哪里分手呢？即使给出了段落的宽度，仍然很难确定…

如果我理解正确，您希望能够通过CSS将样式应用于文档中的特定行。例如：将第五行加粗

这是不可能的-CSS不是面向行的，而是面向DOM元素的。因此，为了实现您的目标，您必须将行包装在（或）元素中，然后将样式应用于该元素

---

CSS不是面向行的，因为行号是虚幻的：行号将根据屏幕分辨率、浏览器窗口的宽度、浏览器中定义的默认字体等而变化。因此，基于行号的样式设置会给您带来可疑的结果。

如果每一行都是单独的

或
，您可以使用CSS选择

：第N个子项（N）

摘自，在Opera 9.5+、Safari 4+、FF3.5中工作+

说明

这个伪类根据元素在父元素的子元素列表中的位置匹配元素。伪类接受一个参数N，它可以是关键字、数字或形式为a+b的数字表达式。有关更多信息，请参见理解
：n子类表达式

如果N是一个数字或数字表达式，：N子项（N）匹配文档树中前面有N-1个同级的元素

以下示例选择器是等效的，将匹配奇数编号的表行：

tr:nth-child(2n+1) {
  ⋮ declarations
}
tr:nth-child(odd) {
  ⋮ declarations
}

tr:nth-child(odd) {
  ⋮ declarations
}

此示例选择器将匹配任何表的前三行：

tr:nth-child(-n+3) {
  ⋮ declarations
}

此示例选择器将匹配作为其父元素的第一个子元素的任何段落：

p:nth-child(1) {
  ⋮ declarations
}

当然，这相当于选择器p:first child

范例

此示例选择器将匹配奇数编号的表行：

tr:nth-child(2n+1) {
  ⋮ declarations
}
tr:nth-child(odd) {
  ⋮ declarations
}

tr:nth-child(odd) {
  ⋮ declarations
}

您也可以使用。
有趣。您可以使用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
});

$（函数（）{
var p=$（'p'）；
var words=p.text（）.split（“”）；
var text=''；
$。每个（字、函数（i、w）{
如果（$.trim（w））text=text+''+w+'}
)；//每个字
p、 html（文本）；
$（窗口）。调整大小（函数（）{
var线=0；
var-prevTop=-15；
$（'span'，p）.each（函数（）{
var-word=$（这个）；
var top=word.offset（）.top；
如果（top！=prevTop）{
prevTop=顶部；
line++；
} 
word.attr（'类'，'行'+行）；
})；//每个
})；//调整大小
$（窗口）.resize（）；//第一个
});

基本上，我们用一个span来包装每个单词，并在窗口调整大小时根据span的位置添加一个类。我相信这可以更有效地完成，但它可以作为概念的证明。当然，对于偶数/奇数行，您可以简化代码

边缘案例：我没有在类改变单词大小或宽度的地方进行测试。结果可能会大错特错

这就是它的作用：
我发现了一个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>


.poem.line[first]{/*`.poem:：first-line`*/}
.poem.line[last]{/*`.poem:：last line`*/}
.poem.line[index=“5”]{/*`.poem:：第n行（5）`*/}
.poem.line:n类型（-n+2）{/*`。poem:：n行（-n+2）`/}
.诗.行：第n行（2n）{/*`。诗：：第n行（2n）`/}

（）
如果我们将CSS限制为文本和背景色，则可以使用CSS实现此效果：


正文{
字体大小：16px；
线高：20px；
}
.文本{
背景：线性梯度（至底部，深红色20%，珊瑚20%40%，海绿40%60%，
道奇蓝60%80%，中蓝80%；
背景尺寸：100px 100px；
背景位置：左上角；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
}
.背景{
背景：线性梯度（至底部，白色50%，eee 50%）；
背景尺寸：100px 40px；
背景位置：左上角；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。非尼西-维尼那提斯拍卖行。这是一种明智的选择。梅塞纳斯是一位著名的诗人。我是马蒂斯·奥迪奥。
Donec rhoncus posuere bibendum。他是一名精英，不是波苏尔·拉奥里特，而是法雷特拉·贾斯托。莫里斯·奥迪奥·伊斯特，在努拉的阿利奎特。阿利奎姆·埃拉特·帕特。佩伦特斯克bibendum tellus nibh。我们将坐在阿梅特广场
这是我的第二次月经。Lorem ipsum dolor sit amet，是一位杰出的献身者。非尼西-维尼那提斯拍卖行。这是一种明智的选择。梅塞纳斯是一位著名的诗人。
我是马蒂斯·奥迪奥。Donec rhoncus posuere bibendum。他是一名精英，不是波苏尔·拉奥里特，而是法雷特拉·贾斯托。毛里斯·奥迪奥