Question

使用CSS计数器，是否可以设置一个在：before之前显示计数器的类，但是为该类的每次使用设置该计数器的初始值？

例如，如果我使用下面的css和html显示行号，我是否可以创建一个类来允许我说从7而不是1开始行号，或者，我是否必须创建一个唯一的类对于我想以不同的初始计数器值开始的每个块？

pre { counter-reset: line; }
code{ counter-increment: line; }
code:before{ content: counter(line); }

<pre><code>Line of code</code></pre>

Answer 1

您可以向counter-reset提供任意的起始值，但是您需要使用其内联pre属性对每个style元素执行此操作，并且您需要提供比您想要的起始行数少1：

pre { counter-reset: line; }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre style="counter-reset: line 6"><code>Line of code</code></pre>

你可以想象，这是非常hacky（我不是指你在这里的行号的实现，因为它不是你的问题的焦点，我的声明适用于任何使用CSS计数器而不是强大的实现），但没有其他只有CSS的解决方案（你甚至可以考虑使用内联样式“而不仅仅是CSS”，这是完全可以理解的）。这就是为什么大多数实现以某种形式或形式使用JavaScript以使其在最终用户（作者）上更容易一些。

如果仅支持attr()的浏览器具有content以外的属性，这将完全无关紧要，但唉，they don't，因此以下假设解决方案无效：

pre { counter-reset: line; }
pre[data-line] { counter-reset: line calc(attr(data-line integer) - 1); }
code { counter-increment: line; }
code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre data-line="7"><code>Line of code</code></pre>

Answer 2

属性值可以具有计数器的名称和初始值：

counter-reset: line 999

https://www.w3.org/wiki/CSS/Properties/counter-reset

使用css计数器如何创建一个可以具有计数器集初始值的类？

2 个答案: