仅使用CSS在pre上创建行号

Question

我尝试用每行前面的行号来设置代码前置框的样式。我更喜欢只使用CSS。这就是我所做的

pre {

  background: #303030;

  color: #f1f1f1;

  padding: 10px 16px;

  border-radius: 2px;

  border-top: 4px solid #00aeef;

  -moz-box-shadow: inset 0 0 10px #000;

  box-shadow: inset 0 0 10px #000;

}

pre span {

  display: block;

  line-height: 1.5rem;

}

pre span:before {

  counter-increment: line;

  content: counter(line);

  display: inline-block;

  border-right: 1px solid #ddd;

  padding: 0 .5em;

  margin-right: .5em;

  color: #888

}


<pre>

  <span>lorem ipsum</span>

  <span>&gt;&gt; lorem ipsum</span>

  <span>lorem ipsum,\ </span>

  <span>lorem ipsum.</span>

  <span>&gt;&gt; lorem ipsum</span>

  <span>lorem ipsum</span>

  <span>lorem ipsum</span>

  <span>lorem ipsum</span>

</pre>

但是，所有行都有数字1。增量无效。这是一个jsfiddle

1. 我做错了什么？
2. 浏览器与此仅CSS解决方案的兼容性如何？

Answer 1

为什么计数器不增加？

您不是在父标记级别重置或创建计数器。如果pre将以下行添加到选择器，代码将正常工作。如果您没有counter- reset在父级创建计数器（使用），则每个元素都会创建自己的计数器，然后对其进行递增。

counter-reset: line;

什么时候创建计数器？

从W3C规范：

counter-reset属性在元素上创建新的计数器。

计数器集和计数器增量属性可控制现有计数器的值。 只有在元素上还没有给定名称的计数器时， 它们 才创建新的计数器 。

在这种情况下，发生的事情是我们没有使用该counter-reset属性创建计数器，因此伪元素选择器中的counter- increment属性span:before将创建给定名称的计数器并将其递增。

计数器如何知道当前值？

再次来自W3C规范：

如果元素具有先前的同级，则它 必须继承所有同级的counters 。否则，如果元素具有父级，则它 必须继承父级的所有计数器 。否则，元素必须具有一组空计数器。

然后 ，该元素按文档顺序从前一个元素继承计数器值 。

在这里，由于计数器仅在伪元素中span创建，因此其父级（）不知道其创建，因此其同级成员span不会继承计数器。由于它甚至不继承任何计数器，因此也不会从前一个元素获取当前值。

为什么要在父级上创建计数器？

当在pre标签级别创建计数器时，该计数器然后传递到其每个子元素（也就是说，每个子元素span又将span:before知道或继承此计数器），现在in中的增量语句span:before将仅递增它从父级收到的计数器的值。

现在，由于每个span继承line自其先前同级的计数器，因此它们还将继承文档顺序中来自先前元素的当前值，因此它不断从1增加到2、3等。

为什么对跨度或前功使用反增量？

正如你已经猜到，反增量属性 创建 一个新的计数器，当没有现成的计数器等添加counter-increment: line在span将创建上遇到的第一个跨度的计数器。现在，由于span继承的每个同级都继承了该计数器，因此它不会每次都创建一个新的计数器，而只是从先前的元素继承值。因此，这种方法可以工作，但是最好使用counter- reset语句显式创建计数器。

浏览器如何支持？

浏览器对CSS计数器的支持非常好。它不是CSS中的新事物，即使在IE8中也支持它。

演示：

pre {

  background: #303030;

  color: #f1f1f1;

  padding: 10px 16px;

  border-radius: 2px;

  border-top: 4px solid #00aeef;

  -moz-box-shadow: inset 0 0 10px #000;

  box-shadow: inset 0 0 10px #000;

  counter-reset: line;

}

pre span {

  display: block;

  line-height: 1.5rem;

}

pre span:before {

  counter-increment: line;

  content: counter(line);

  display: inline-block;

  border-right: 1px solid #ddd;

  padding: 0 .5em;

  margin-right: .5em;

  color: #888

}


<pre><span>lorem ipsum</span>

<span>&gt;&gt; lorem ipsum</span>

<span>lorem ipsum,\ </span>

<span>lorem ipsum.</span>

<span>&gt;&gt; lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

</pre>