Is it possible to specify a starting number for an ordered list?

前端 未结 10 2208
梦毁少年i
梦毁少年i 2020-12-02 16:18

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 c

相关标签:
10条回答
  • 2020-12-02 16:57

    Via HTML, using the start attribute

    An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

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

    Via CSS, using CSS counters:

    CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.

    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>

    0 讨论(0)
  • 2020-12-02 16:59

    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:

    <!doctype html>
    

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

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

    0 讨论(0)
  • 2020-12-02 17:01

    Starting the numbering of an ordered list at a number that differs from the default value ("1") requires the start attribute. 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 ol element also had an optional start attribute in XHTML 1.0's transitional DTD but not in XHTML 1.0's strict DTD (search for the string ATTLIST ol and check the attribute list). So in spite of what some of the older comments say, the start attribute was not deprecated; rather it was invalid in the strict DTDs of HTML 4.01 and XHTML 1.0. In spite of what one of the comments claims, the start attribute is not allowed on the ul element and currently does not work in Firefox and Chromium.

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

    <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):

    <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 counter values might get lost as a result. Screen reader support for counter should 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).

    0 讨论(0)
  • 2020-12-02 17:06

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

    0 讨论(0)
提交回复
热议问题