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

Question

提问by vrish88

I have a ordered list where I would like the initial number to be 6. I found that this was supported(now deprecated) in HTML 4.01. In this specification they say that you can specify the starting integer by using CSS. (instead of the startattribute)

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

How would you specify the starting number with CSS?

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

Answer 1

回答by Travis

If you need the functionality to start an ordered list (OL) at a specific point, you'll have to specify your doctype as HTML 5; which is:

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

<!doctype html>

With that doctype, it is valid to set a startattribute on an ordered list. Such as:

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

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

Answer 2

回答by Ms2ger

<ol start="">is not deprecated anymore in HTML5, so I'd just keep using it, regardless of what HTML4.01 says.

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

Answer 3

回答by Adam Grant

start="number"sucks because it doesn't automatically change based on the numbering before it.

start="number"很糟糕，因为它不会根据之前的编号自动更改。

Another way to do this that may fit more complicated needs is to use counter-resetand counter-increment.

另一种可能适合更复杂需求的方法是使用counter-reset和counter-increment。

Problem

问题

Say you wanted something like this:

假设你想要这样的东西：

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

You could set start="3"on the third liof the second ol, but now you'll need to change it every time you add an item to the first ol

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

Solution

解决方案

First, let's clear the formatting of our current numbering.

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

ol {
  list-style: none;
}

We'll have each li show the counter

我们将让每个 li 展示柜台

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

Now we just need to make sure the counter resets only on the first olinstead of each one.

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

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

Demo

演示

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

Now I can add as many items to either list and numbering will be preserved.

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

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

回答by hcmcf

I'm surprised that I wasn't able to find the answer in this thread.

我很惊讶我无法在此线程中找到答案。

I have found this source, which I have summarised below:

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

To set the start attribute for an ordered list using CSS instead of HTML, you can use the counter-incrementproperty as follows:

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

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

counter-incrementseems to be 0-indexed, so to get a list that starts at 4, use 3.

counter-increment似乎是 0 索引的，因此要获取从 4 开始的列表，请使用3.

For the following HTML

对于以下 HTML

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

My result is

我的结果是

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

Check out my fiddle

看看我的小提琴

回答by Andrey

As others suggested, one can use startattribute of olelement.

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

Alternatively, one can use valueattribute of lielement. Both attributes are marked as deprecated in HTML 4.01, but not in HTML 5 (oland li).

或者，可以使用元素的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 6

回答by Tsundoku

Starting the numbering of an ordered list at a number that differs from the default value ("1") requires the startattribute. This attribute was allowed (not deprecated) in the HTML 4.01 specification(HTML 4.01 was not yet a "Superseded Specification" at the time this question was posted) and is still allowed in the current HTML 5.2 specification. The olelement also had an optional startattribute in XHTML 1.0's transitional DTDbut not in XHTML 1.0's strict DTD(search for the string ATTLIST oland check the attribute list). So in spite of what some of the older comments say, the startattribute was not deprecated; rather it was invalidin the strict DTDs of HTML 4.01 and XHTML 1.0. In spite of what one of the comments claims, the startattribute is not allowed on the ulelement and currently does not work in Firefox and Chromium.

从不同于默认值（“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 中不起作用。

Note also that a thousands separator does not work (in current versions of Firefox and Chromium). In the following code snippet, 10.000will be interpreted as 10; the same applies to 10,000. So don't use the following type of countervalue:

另请注意，千位分隔符不起作用（在当前版本的 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>

So what you should use is the following (in the rare cases where values higher than 1000 are at all required):

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

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

Some of the other answers suggest using the CSS property counter, but this runs counter the traditional separation of content and layout (in HTML and CSS, respectively). Users with certain visual impairments may use their own style sheets, and the countervalues might get lost as a result. Screen reader support for countershould also be tested. Screen reader support for content in CSS is a relatively recent feature and behaviour is not necessarily consistent. See Screen Readers and CSS: Are We Going Out of Style (and into Content)?by John Northup on the WebAIM blog (August 2017).

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

Answer 7

回答by LoonyNoob

In case the lists are nested, there has to be a handling leaving out the nested list items, which I accomplished by verifying that the grand parent is not a list item.

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

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

回答by LoonyNoob

With CSS it is a bit tricky to cover the case that there are nested list items, thus only the first list level gets the custom numbering that does not interupt with each new ordered list. I'm using CSS combinator '>' to define the possible paths to the list items that shall get a custom numbering. See https://www.w3schools.com/css/css_combinators.asp

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

回答by LoonyNoob

Obviously neither @start of an ordered list <ol> nor @value of a list item <li> can be set via CSS. See https://www.w3schools.com/css/css_list.asp

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

Replacing the numbering by a counter in CSS seems to be the best/fastest/foolproof solution and there are others promoting it, e.g. https://css-tricks.com/numbering-in-style/

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

With pure JavaScript it is possible to set @value of each list item, but this is of course slower than CSS. It is not even required to check if the list item belongs to an ordered list <ol>, because unordered lists are left out automatically.

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

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

提问by vrish88

回答by Travis

回答by Ms2ger

回答by Adam Grant

回答by hcmcf

回答by Andrey

回答by Tsundoku

回答by LoonyNoob

回答by LoonyNoob

回答by LoonyNoob

相关推荐

最近更新

标签

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

提问by vrish88

回答by Travis

回答by Ms2ger

回答by Adam Grant

回答by hcmcf

回答by Andrey

回答by Tsundoku

回答by LoonyNoob

回答by LoonyNoob

回答by LoonyNoob

相关推荐

Html 在 CSS 中更改打印文本大小

Html 如果 <form> 中的 action 字段有参数会发生什么？

Html 将两个 div 放在同一水平面上

Html “显示：无”内容复制到剪贴板，粘贴时可见

相关推荐

最近更新

标签