仅在CSS上使用CSS创build行号
我尝试使用每行前面的行号来设置代码预置框的样式。 我宁愿只用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>>> 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>
但是，所有行都有数字1.增量不起作用。 这是一个jsfiddle
- 我做错了什么？
- 什么是浏览器兼容这个CSS唯一的解决scheme？
为什么柜台不增加？
您不是在父级标签级别重置或创build计数器。 如果您将以下行添加到preselect器，代码将正常工作。 当你不在父级创build计数器（使用counter-reset ）时，每个元素将创build自己的计数器，然后增加它。
counter-reset: line;
计数器何时创build？
来自W3C规范 ：
计数器重置属性在元素上创build新的计数器。
计数器和计数器递增属性操作现有计数器的值。 如果元素上没有给定名称的计数器，它们只会创build新的计数器 。
在这种情况下，发生的是我们还没有使用counter-reset属性创build一个计数器，所以span:before伪元素select器中的counter-increment属性会创build一个给定名称的计数器并将其递增。
柜台怎么知道现在的价值？
再次来自W3C规范 ：
如果一个元素有一个先前的兄弟，它必须inheritance所有的兄弟的计数器 。 否则，如果元素具有父项，则它必须inheritance父项的所有计数器 。 否则，该元素必须有一组空的计数器。
然后， 元素按照文档顺序inheritance前一个元素的计数器值 。
这里由于计数器只是在伪元素中创build的，所以其父（ span ）不知道它的创build，所以这个span的同胞不会inheritance计数器。 既然它不能inheritance任何计数器，它也不会从前面的元素获得当前值。
为什么要在父母的工作上创build计数器？
当计数器在pre标签级创build时，计数器被传递给它的每一span元素（也就是每个span ，然后每个span:before将知道或inheritance这个计数器），现在增量语句在span:before只会增加从父节点收到的计数器的值。
现在，由于每个span从前一个兄弟inheritance了line计数器，所以它们也将从文档顺序中的前一个元素inheritance当前值，从而继续从1到2,3等。
为什么在跨度或前期工作中使用反递增？
正如你猜测的那样，当没有现有的计数器时，counter-increment属性会创build一个新的计数器，因此在span上添加counter-increment: line将在遇到的第一个跨度上创build一个计数器。 现在，由于span每个兄弟都inheritance了这个计数器，所以它不会每次都创build一个新的，而只是inheritance前一个元素的值。 因此，这种方法是可行的，但最好是使用counter-reset语句明确创build计数器。
浏览器如何支持？
对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>>> 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> <span>lorem ipsum</span> <span>lorem ipsum</span> <span>lorem ipsum</span> </pre>
你必须在你的范围内增加line ：
pre span { display: block; line-height: 1.5rem; counter-increment: line; }
看看这个更新的jsfiddle 。
嗨，你需要重置计数器上一个/更高的加载项目，检查出https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; } pre { counter-reset: line; }
