如何使用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（基于1的索引/ OBI）开始；例如我有5行0-4。

我的问题

如何使用CSS进行一基索引（假设有可能）？

Answer 1

counter-reset单独将计数器重置为0，as you can see in the docs。如果要将其设置为其他数字，可以在计数器名称后放置一个数字，例如：

.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>