如何使用CSS进行单碱索引?

Question

我有一个有5行的HTML表格;每行有两个单元格(title，main-content(。

我想用这个 CSS 为行添加:before自动编号：

.view-my-book .views-field-title {counter-reset: item}
.view-my-book .views-field-title:before {content: counter(item) " "; 

它的工作原理是每一行都有编号

我的问题

编号从 0*(基于零的索引(开始，而我希望它从 1(基于一个的索引/OBI(开始;例如，我有 5 行 0-4。

我的问题

如何使用CSS进行单碱索引(假设可以(？

Answer 1

counter-reset单独将计数器重置为 0，如您在文档中看到的那样。如果要将其设置为其他数字，可以在计数器名称后放置一个数字，例如：

.view-my-book .views-field-title {
counter-reset: item 1
}

Answer 2

计数器的索引都归结为您应用counter-increment的位置(在较小程度上，counter-reset(。如果您希望数字从1开始，您需要做的就是在.views-field-title上递增计数器：

.view-my-book .views-field-title {
counter-increment: item
}
.view-my-book .views-field-title:before {
content: counter(item) " ";
}

<div class="view-my-book">
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
</div>

如有必要，您还可以使用counter-reset: {counter} {count}将计数器重置为特定点(例如counter-increment: item 5(。您可能希望将其应用于父元素 -.view-my-book在您的情况下。

下面是一个示例：

.view-my-book .views-field-title {
counter-increment: item
}
.view-my-book .views-field-title:before {
content: counter(item) " ";
}
.view-my-book {
counter-reset: item 5
}

<div class="view-my-book">
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
<div class="views-field-title">Text</div>
</div>