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

114

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

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

html  css  html-lists 
— vrish88
source

Answers:

147

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

<!doctype html>

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

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
展开摘要

— 特拉维斯
source
7
这仍然准确吗？
— antony.trupe 2012年
3
使用HTML5，此答案是正确的，是的。
— 特拉维斯2014年
start属性也适用于无序（<ul>）列表，例如：<ul style =“ list-style-type：lower-roman;” start =“ 4”>，并将在“ iv”或<ul style =“ list-style-type：upper-alpha;”上开始列表 start =“ 4”>从“ D”开始
— Matthew Cox
66

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

— Ms2ger
source
32

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

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

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

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
— 亚当·格兰特
source
您还可以明确指定自己的数字：stackoverflow.com/a/31823704/320036
— z0r 2015年
2
ol li {...}应该是ol li:before {...} -否则，这是完美的解决方案，谢谢！
— 达沃
15

令我惊讶的是，我无法在该线程中找到答案。

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

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

看看我的小提琴

另请参阅W3 Wiki参考

— hcmcf
source
1
好答案。谢谢您，这真是一条命。
— 安德烈（Andrea）'18
9

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

或者，可以使用element的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>
展开摘要

— 安德烈
source
1

以一个不同于默认值（“ 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月）。

— 经国
source
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>
展开摘要

— 龙尼·诺布（LoonyNoob）
source
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>
展开摘要

— 龙尼·诺布（LoonyNoob）
source
-1

显然，不能通过CSS设置有序列表<ol>的@start或列表项<li>的@value。参见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>
展开摘要

— 龙尼·诺布（LoonyNoob）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.