如何指定从哪里开始列表CSS

Question

我的 HTML 结构如下所示：

<ol styletype="A" start="5">
  <li data-prefix="Pre" data-suffix="Suf">Item 1</li>
  <li data-prefix="Pre" data-suffix="Suf">Item 2</li>
  <li data-prefix="Pre" data-suffix="Suf">Item 3</li>
</ol>

start 属性是我想要开始列表的地方。我能够执行以下操作，我能够从输入到内容可编辑列表中的数字开始列表：

/* Default start value */
ol {
  counter-reset: item;
}

/* Custom start values */
ol[start="2"] {
  counter-reset: item 0;
}

ol[start="3"] {
  counter-reset: item 1;
}

ol[start="4"] {
  counter-reset: item 2;
}

/* Add more as needed */
ol[start="5"] {
  counter-reset: item 3;
}

/* Decimal (1, 2, 3, ...) */
ol[styletype="1"] > li::before {
  content: attr(data-prefix) "." counter(item, decimal) "." attr(data-suffix);
  position: absolute;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
  counter-increment: item;
}

我可以从 1 - 5 开始一个列表，没问题，但是，我需要一种方法能够从任何数字、罗马数字、字母等开始一个列表。我希望能够从 b. 开始一个列表， z.、4.、7. 等

我尝试过这个方法：

ol[start] {
  counter-reset: item calc(attr(start, number) - 1);
}

但是，无论我输入什么，它都会以 2 开始每个列表。

Answer 1

要使用 start 和 styletype 属性从任何数字、字母或罗马数字开始有序列表，请使用以下方法：

JavaScript：

document.querySelectorAll('ol[start]').forEach(function(ol) {
    const startValue = parseInt(ol.getAttribute('start'), 10);
    if (!isNaN(startValue)) {
        ol.style.counterReset = 'item ' + (startValue - 1);
    }
});

CSS：

ol {
  counter-reset: item;
  list-style: none;
  position: relative;
  padding-left: 2em;
}

ol > li::before {
  content: attr(data-prefix) "." counter(item, var(--counter-type)) "." attr(data-suffix);
  counter-increment: item;
  position: absolute;
  left: 0;
}

ol[styletype="1"] { --counter-type: decimal; }
ol[styletype="a"] { --counter-type: lower-alpha; }
ol[styletype="A"] { --counter-type: upper-alpha; }
ol[styletype="i"] { --counter-type: lower-roman; }
ol[styletype="I"] { --counter-type: upper-roman; }

此组合允许您使用不同的样式（“1”、“a”、“A”、“i”、“I”）从任何值开始列表。