126

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

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

4

10 回答 10

162

如果您需要在特定点启动有序列表 (OL) 的功能，则必须将您的文档类型指定为 HTML 5；这是：

<!doctype html>

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

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

于 2009-04-22T20:25:50.580 回答
68

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

于 2009-04-25T15:20:27.737 回答
37

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;
}

我们会让每个人向柜台展示

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

现在我们只需要确保计数器只在第一个ol而不是每个都重置。

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

演示

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

ol
  list-style: none
  
li
  &:before
    counter-increment: mycounter
    content: counter(mycounter) ". "
    
  &:first-of-type
    counter-reset: mycounter
<ol>
  <li>Item one</li>
  <li>Item two</li>
</ol>
<p>Interruption</p>
<ol>
  <li>Item three</li>
  <li>Item four</li>
</ol>
<p>Interruption</p>
<ol>
  <li>Item five</li>
  <li>Item six</li>
</ol>

现在我可以向任一列表添加尽可能多的项目，并且编号将被保留。

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

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
于 2015-05-07T19:09:11.583 回答
17

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

我找到了这个来源，我总结如下：

要使用 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-indexed，所以要获得从 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

看看我的小提琴

另请参阅W3 wiki 参考

于 2017-07-25T06:07:44.153 回答
11

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

或者，可以使用元素value的属性。这两个属性在HTML 4.01li中都被标记为已弃用，但在 HTML 5 (和) 中没有。olli

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

于 2016-02-16T00:20:17.850 回答
2

通过 HTML，使用start 属性

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

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

通过 CSS，使用CSS 计数器：

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>

于 2020-10-23T16:27:42.060 回答
1

从不同于默认值（“1”）的数字开始对有序列表进行编号需要该start属性。该属性在HTML 4.01 规范中是允许的（不被弃用） （在发布此问题时 HTML 4.01 还不是“被取代的规范”），并且在当前的HTML 5.2 规范中仍然允许。该元素在XHTML 1.0 的过渡 DTDol中也有一个可选start属性，但在XHTML 1.0 的严格 DTD中没有（搜索字符串并检查属性列表）。因此，尽管一些较早的评论说了什么，但该属性并未被弃用；而是无效的ATTLIST olstart在 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 月）。

于 2018-12-11T12:03:41.737 回答
0

如果列表是嵌套的，则必须进行忽略嵌套列表项的处理，我通过验证祖父不是列表项来完成此操作。

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>

于 2019-02-05T15:52:58.820 回答
0

使用 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>

于 2019-02-05T16:10:30.930 回答
-1

显然，有序列表 <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>

于 2019-02-05T15:45:51.157 回答