Question

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

您如何使用CSS指定起始编号？

Answer 1

如果您需要在特定点启动有序列表（OL）的功能，则必须将您的doctype指定为HTML 5;这是：

<!doctype html>

使用该doctype，在有序列表上设置start属性是有效的。如：

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

Answer 2

<ol start="">在HTML5中不再被弃用，因此无论HTML4.01说什么，我都会继续使用它。

Answer 3

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，但现在每次向第一个{{1}添加项目时都需要更改ol }

<强>解决方案

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

ol {
  list-style: none;
}

我们将让每个李显示计数器

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

Answer 4

正如其他人所建议的那样，可以使用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>

Answer 5

我很惊讶我无法在这个帖子中找到答案。

我找到了this source，我在下面总结了这些内容：

要使用CSS而不是HTML设置有序列表的start属性，可以使用counter-increment属性，如下所示：

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

counter-increment似乎是0索引，因此要获得从4开始的列表，请使用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

查看我的fiddle

另请参阅W3 wiki reference

Answer 6

以与默认值（“ 1”）不同的数字开始对有序列表进行编号需要start属性。 HTML 4.01 specification中允许（不弃用）此属性（发布此问题时HTML 4.01尚未被“取代的规范”），当前HTML 5.2 specification中仍然允许该属性。 ol元素在XHTML 1.0's transitional DTD中也具有可选的start属性，但在XHTML 1.0's strict 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内容的支持是一个相对较新的功能，行为不一定一致。请参阅WebAIM博客上的John Northup的Screen Readers and CSS: Are We Going Out of Style (and into Content)?（2017年8月）。

Answer 7

如果列表是嵌套的，则必须进行处理以省去嵌套的列表项，这是通过验证祖父母不是列表项来完成的。

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>

Answer 8

使用CSS来掩盖嵌套列表项的情况有些棘手，因此只有第一个列表级别才能获得不与每个新排序列表交互的自定义编号。我使用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>

Answer 9

使用start attribute

通过HTML

一个用于从列表项开始计数的整数。即使编号类型为字母或罗马数字，也始终为阿拉伯数字（1、2、3等）。例如，要从字母“ d”或罗马数字“ iv”开始为元素编号，请使用start =“ 4”。

<ol start="10">
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

通过CSS使用CSS counters：

CSS计数器使您可以根据内容在文档中的位置来调整内容的外观。例如，您可以使用计数器为网页中的标题自动编号。从本质上讲，计数器是由CSS维护的变量，其值可以通过CSS规则递增以跟踪其使用次数。

ol {
  list-style: none;
  counter-reset: li 9; /* syntax: "counter name" "init value" */
}

ol li:before {
  counter-increment: li; /* for every appearance, add one */
  content: counter(li) ". "; /* mimic default ol list-style */
}

<ol>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

Answer 10

很显然，不能通过CSS设置有序列表

的@value。参见http://repo1.maven.org/maven2/org/apache/ivy/ivy/2.5.0-rc1/ivy-2.5.0-rc1.jar

在CSS中用计数器代替编号似乎是最好/最快/最安全的解决方案，还有其他一些方法在推广它，例如https://www.w3schools.com/css/css_list.asp

使用纯JavaScript可以设置每个列表项的@value，但这当然比CSS慢。甚至不需要检查列表项是否属于有序列表

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>

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

10 个答案: