是否可以指定有序列表的起始编号？

StackOverflow https://stackoverflow.com/questions/779016

  •  13-09-2019
  •  | 
  •  

题

我有一个有序列表，我希望初始数字为 6。我发现这是 支持的 （现已弃用）在 HTML 4.01 中。在本规范中，他们说您可以使用 CSS 指定起始整数。（而不是 start 属性）

如何用 CSS 指定起始编号？

有帮助吗？

解决方案

如果您需要的功能在特定点开始的有序列表（OL），你必须指定DOCTYPE为HTML 5;其是：

<!doctype html>

使用该文档类型，它是有效的设置start属性的有序列表上。如：

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

其他提示

<ol start=""> 不再弃用 HTML5, ，所以我会继续使用它，不管 HTML4.01 怎么说。

start="number"吮吸，因为它不会自动改变基于之前它的编号。

的另一种方法可以做到这一点可以装配更复杂的需要是使用counter-reset和counter-increment。

<强>问题

假设你想要的东西是这样的：

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

您可以在第二start="3"的第三li设置ol，但现在你需要每一次改变它，你添加项目到第一ol

<强>解决方案

首先，让我们清楚我们目前编号的格式。

ol {
  list-style: none;
}

我们将有每个L1表示计

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

现在，我们只需要确保计数器复位仅在第一ol，而不是每一个。

ol:first-of-type {
  counter-reset: mycounter;
}

<强>演示

http://codepen.io/ajkochanowicz/pen/mJeNwY

现在我可以尽可能多的项目加入到任意一个列表和编号将被保留。

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

我很惊讶，我没能找到这个线程的答案。

我已经发现此源，该我已经概括如下：

要设置使用，而不是HTML CSS有序列表开始的属性，你可以按如下方式使用counter-increment属性：

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-increment似乎是0索引，所以要得到的是开始于列表，使用3。

有关下面的HTML 

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

我的结果是

d) Buy milk
e) Feed the dog
f) Drink coffee

看看我的小提琴

又见 W3页面添加内容参考

正如其他人所建议的，可以使用 start 的属性 ol 元素。

或者，可以使用 value 的属性 li 元素。这两个属性都被标记为已弃用 HTML 4.01, ，但不在 HTML 5 中（ol 和 li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

从不同于默认值（“1”）的数字开始有序列表的编号需要 start 属性。该属性在 HTML 4.01 规范 （在发布此问题时，HTML 4.01 还不是“被取代的规范”）并且在当前版本中仍然允许 HTML 5.2 规范. 。这 ol 元素还有一个可选的 start 属性在 XHTML 1.0 的过渡 DTD 但不在 XHTML 1.0 的严格 DTD （搜索字符串 ATTLIST ol 并检查属性列表）。因此，尽管有些较早的评论说， start 属性不是 已弃用;相反，它是 无效的 在 HTML 4.01 和 XHTML 1.0 的严格 DTD 中。尽管其中一条评论声称， start 属性不允许 ul 元素，目前不适用于 Firefox 和 Chromium。

另请注意，千位分隔符不起作用（在当前版本的 Firefox 和 Chromium 中）。在下面的代码片段中， 10.000 将被解释为 10;这同样适用于 10,000. 。所以不要使用以下类型 counter 价值：

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

因此，您应该使用以下内容（在极少数情况下，需要高于 1000 的值）：

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

其他一些答案建议使用 CSS 属性 counter, ，但这与传统的内容和布局分离（分别在 HTML 和 CSS 中）背道而驰。有一定视觉障碍的用户可以使用自己的样式表，并且 counter 价值观可能会因此而丢失。屏幕阅读器支持 counter 也应该进行测试。对 CSS 内容的屏幕阅读器支持是一个相对较新的功能，并且行为不一定一致。看 屏幕阅读器和 CSS：我们是否已经过时（而转向内容）？ 作者：John Northup，在 WebAIM 博客上（2017 年 8 月）。

在的情况下列表是嵌套的，必须有离开了嵌套列表项，这是我通过验证的宏伟父不是列表项完成了处理。

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

使用CSS这是一个有点棘手覆盖的情况下，有嵌套列表项，因此只有第一个列表级别获取自定义编号不与每一个新的有序列表interupt。我使用CSS组合子“>”来定义列表中的项目，应得到一个自定义编号的可能路径。请参阅 https://www.w3schools.com/css/css_combinators.asp 

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

显然，有序列表 <ol> 的 @start 和列表项 <li> 的 @value 都不能通过 CSS 设置。看 https://www.w3schools.com/css/css_list.asp

在 CSS 中用计数器替换编号似乎是最好/最快/万无一失的解决方案，还有其他人在推广它，例如 https://css-tricks.com/numbering-in-style/

使用纯 JavaScript 可以设置每个列表项的 @value，但这当然比 CSS 慢。甚至不需要检查列表项是否属于有序列表 <ol>，因为无序列表会被自动排除。

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top