css - 有什么方法可以仅使用 CSS 将元素的索引(子编号)作为文本插入到元素中？

Question

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

<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 中的一个变量，负责元素在其父级和子级选择器中的索引，您可以对其执行操作，例如。 第 n 个 child (2n + 3)

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

.line:before {
  content: n;
}

我知道我可以使用我正在使用的 SASS 来完成此操作，我只是想知道是否有某种方法可以使用 vanilla CSS 实现它。

Answer 1

是的，您可以使用 CSS 计数器来做到这一点。当遇到匹配的选择器时，可以创建和递增 CSS 计数器。对于这种情况，我们可以在 .wrapper 元素级别创建一个计数器，然后在遇到新的 .line 元素时增加计数器值。

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

正如 Aaron Lavers 在他的评论中指出的那样，CSS 计数器并不是新事物而是 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 的数字等。

.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>