如何使用 CSS 进行单基索引？

Question

我有一个 HTML table 有 5 行；每行有两个单元格 (title, main-content).

我想为行添加 :before 自动编号 CSS:

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

如何使用 CSS 进行单基索引？

How to one-base-index with CSS?

javascript

math

function

pseudo-element

css-tables

我的问题

我的问题