仅使用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父级别创建计数器(使用a ),则每个元素都会创建自己的计数器,然后递增计数器.

counter-reset: line;

何时创建计数器？

来自W3C规格:

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

计数器和反增量属性操纵现有计数器的值.如果元素上没有给定名称的计数器,它们只会创建新的计数器.

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

计数器如何知道当前值？

再次来自W3C规范:

如果元素具有前一个兄弟,则它必须继承所有兄弟的计数器.否则,如果元素具有父元素,则它必须继承所有父元素的计数器.否则,元素必须具有一组空的计数器.

然后,该元素以文档顺序从前一个元素继承计数器值.

这里由于计数器仅在伪元素中span创建,因此其父()不知道它的创建,因此它的兄弟span不会继承计数器.因为它甚至没有继承任何计数器,所以它也不会从前面的元素获得当前值.

为什么在父母工作上创建计数器？

当在创建计数器pre标签水平,计数器,然后传递给它的每个子元素(即每个span并依次每个span:before会知道或继承这个计数器),现在在增量语句span:before只会递增从父母那里收到的柜台价值.

现在因为每个都从它的前一个兄弟span继承了line计数器,所以它们也将继续从文档顺序中的前一个元素继承当前值,因此它从1上升到2,3等.

为什么在跨度或前期工作时使用反增量？

正如您所猜测的那样,当没有现有计数器时,counter-increment属性会创建一个新计数器,因此添加将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>