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

我有一个订购清单，我希望初始数字是6。我发现这是 HTML 4.01中的 支持(现在已经废弃了)。在这个规范中，他们说您可以使用 CSS 来指定起始整数。(而不是 start属性)

如何用 CSS 指定起始数字？

114243 次浏览
小开
最佳答案

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

<!doctype html>

对于这种 doctype，在有序列表上设置 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

您可以在第二个 ol的第三个 li上设置 start="3"，但是现在您需要在每次向第一个 ol添加项目时更改它

解决方案

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

ol {
list-style: none;
}

我们会让每个李展示柜台

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

现在我们只需要确保计数器只在第一个 ol上重置，而不是在每个 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
...
小开

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

或者，可以使用 li元素的 value属性。在 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>

小开

我很惊讶我没能在这个帖子里找到答案。

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

要使用 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维基百科

小开

以不同于默认值(“1”)的数字开始一个有序列表的编号需要 start属性。这个属性在 HTML 4.01规范中是允许的(不是弃用)(在发布这个问题时 HTML 4.01还不是“替代的规范”) ，并且在当前的 HTML 5.2规范中仍然是允许的。ol元素在 XHTML 1.0的过渡 DTD中也有一个可选的 start属性，但在 ol0中没有(搜索字符串 ATTLIST ol并检查属性列表)。因此，尽管一些较早的注释说，start属性不是 ol1; 而是在 HTML 4.01和 XHTML 1.0的严格 DTD 中的 ol2。尽管其中一条注释声称，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 内容的支持是一个相对较新的特性，其行为不一定一致。参见 John Northup 在 WebAIM 博客上撰写的 屏幕阅读器和 CSS: 我们正在走出风格(进入内容)吗？(2017年8月)。

小开

显然，不能通过 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>

小开

如果列表是嵌套的，那么必须有一个省略嵌套列表项的处理，我通过验证父列表项不是列表项来实现这一点。

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，覆盖嵌套列表项的情况有点棘手，因此只有第一个列表级别获得自定义编号，不会与每个新的有序列表中断。我使用 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>

小开

通过 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>


提交答案