html - 仅使用 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 Specs :

The counter-reset property creates new counters on an element.

The counter-set and counter-increment properties manipulate the value of existing counters. They only create new counters if there is no counter of the given name on the element yet.

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

---

计数器如何获知当前值？

再次来自W3C Specs :

If an element has a previous sibling, it must inherit all of the sibling’s counters. Otherwise, if the element has a parent, it must inherit all of the parent’s counters. Otherwise, the element must have an empty set of counters.

The element then inherits counter values from the immediately preceding element in document order.

这里因为计数器只在伪元素中创建，它的父元素(span)并不知道它的创建，所以这个span 的 sibling 是不知道的。不继承计数器。由于它甚至不继承任何计数器，因此它也不会从前面的元素获取当前值。

---

为什么在父级工作时创建计数器？

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

现在因为每个span继承了 line从它的前一个兄弟计数器开始，它们也将从文档顺序中的前一个元素继承当前值，因此它从 1 一直上升到 2、3 等。

---

为什么对 span 或 pre 工作使用反增量？

正如您所猜到的，计数器递增属性创建一个新的计数器，当没有现存的计数器时添加counter-increment: line。在 span 上将在遇到的第一个跨度上创建一个计数器。现在，由于 span 的每个 sibling 继承这个计数器，它不会每次都创建一个新的计数器，而只是继承前面元素的值。因此这种方法可行，但最好使用 counter-reset 显式创建计数器。声明。

---

浏览器支持如何？

浏览器对 CSS 计数器的支持非常好。这不是 CSS 和 support for it is available even in 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>