是否有任何方法可以仅使用CSS将元素的索引（子代号）作为文本插入元素中？ [英] Is there any way to insert an element's index (child number) as text within the element solely using CSS?

问题描述

我的目标是逐行打印文本文件，并在开头添加行号。像这样：

My objective is to print a text file line by line and append the line number at the beginning. Like so:

<div id="wrapper">
  <div class="line">1: asdf</div>
  <div class="line">2: asdfasdf</div>
  <div class="line">3: asdfasdfasdfasdf</div>
  <div class="line">4: asdf</div>
</div>

n 是CSS中的变量，负责元素在其父元素和子选择器中的索引，您可以对其执行操作，例如。 nth-child（2n + 3 ）

n is a variable in CSS responsible for an element's index within its parent and within a child selector you can perform operations on it, eg. nth-child(2n + 3)

有没有办法获取此变量并将其作为纯文本插入？基本上是这样的：

Is there any way to grab this variable and insert it as plain text? Essentially like this:

.line:before {
  content: n;
}

我知道我可以使用SASS来完成此任务，我只是想知道是否可以通过香草CSS来实现。

I know I can accomplish this with SASS which is what I'm using, I was just wondering if there's some way to pull it off with vanilla CSS.

推荐答案

是的，您可以使用CSS计数器来实现。遇到匹配的选择器时，可以创建CSS计数器并对其进行递增。对于这种情况，我们可以在 .wrapper 元素级别创建一个计数器，然后每当有新的 .line

Yes, you could do this using CSS counters. CSS counters can be created and incremented when a matching selector is encountered. For this case, we can create a counter at the .wrapper element's level and then increment the counter value whenever a new .line element is encountered.

counter-reset 属性用于创建计数器，而 counter-increment 用于增加值。然后可以通过 content 属性将计数器的值分配给伪元素，其值为 counter（counter-name）。

The counter-reset property is used to create the counter whereas the counter-increment is used to increment the value. The value of the counter can then be assigned to the pseudo-element through the content property with value as counter(counter-name).

正如亚伦·拉弗斯（Aaron Lavers）在其评论中指出的那样，CSS计数器并不是新事物，而是由IE8本身提供支持。

As Aaron Lavers points out in his comment, CSS counters are not a new thing and is supported from IE8 itself.

#wrapper {
  counter-reset: line-number;
}
.line {
  counter-increment: line-number;
}
.line:before {
  content: counter(line-number)": ";
}

<div id="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

我们还可以设置输出值的样式，将值增加一个大于1的数字，从基本值开始，一个不同于0的数字，等等。 。

We can also set styles for the output value, increment the value by a number more than 1, start with the base value as a number different than 0 etc.

.wrapper {
  counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */
}
.line {
  counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */
}
.line:before {
  content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */
}

#wrapper2.wrapper .line:before {
  content: counter(line-number, decimal-leading-zero)": ";
}

<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper" class="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper2" class="wrapper">
  <div class="line">asdf</div>
  <div class="line">asdfasdf</div>
  <div class="line">asdfasdfasdfasdf</div>
  <div class="line">asdf</div>
</div>

这篇关于是否有任何方法可以仅使用CSS将元素的索引（子代号）作为文本插入元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！