Question

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

＆＃13;

mst_suburb

＆＃13;

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
}

＆＃13;

但是，所有行都有数字1.增量不起作用。这是jsfiddle

我做错了什么？
与此仅CSS解决方案的浏览器兼容性是什么？

Answer 1

为什么计数器不会递增？

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

counter-reset: line;

何时创建计数器？

来自W3C Specs：

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

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

在这种情况下，我们没有使用counter-reset属性创建计数器，因此counter-increment伪元素选择器中的span:before属性会创建一个计数器给定名称并增加它。

计数器如何知道当前值？

再次来自W3C Specs：

如果元素具有上一个兄弟，则 必须继承所有兄弟的计数器 。否则，如果元素具有父元素，则 必须继承所有父级的计数器 。否则，元素必须有一组空的计数器。

然后 元素从文档顺序 中的前一个元素继承计数器值。

由于计数器仅在伪元素中创建，因此其父（span）不知道其创建，因此此span的兄弟不会继承计数器。由于它甚至没有继承任何计数器，因此它也不会从前一个元素获得当前值。

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

当计数器在pre标记级别创建时，计数器会传递给每个子元素（即每个span，然后每个span:before知道或继承这个计数器）现在span:before中的增量语句只会增加从父项接收的计数器的值。

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

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

正如您所猜测的，当没有现有计数器时，反增量属性 会创建 一个新计数器，因此在{{{{}}上添加counter-increment: line 1}}将在遇到的第一个跨度上创建一个计数器。现在，由于span的每个兄弟都继承了这个计数器，所以它不会每次都创建一个新计数器，而只是继承前一个元素的值。因此，这种方法可行，但最好使用span语句显式创建计数器。

浏览器如何支持？

CSS计数器的浏览器支持令人难以置信。这不是CSS和support for it is available even in IE8中的新事物。

<强>演示：

counter-reset

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
}

Answer 2

你必须在你的范围内增加line：

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

查看此更新的jsfiddle。

Answer 3

您好需要在上一个/更高的装载项目上重置计数器，请查看https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; }

仅使用CSS在pre上创建行号

3 个答案: