CSS Counters 編號

編號
section1:xxxxxxx
section2:xxxxxxx
section3:xxxxxxx

/*編號順序*/
body {
  counter-reset: section;
}
/* section+編號+: */
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

編號
section1-1:xxxxxxx
section1-2:xxxxxxx
section1-3:xxxxxxx

/*編號順序*/
body {
  counter-reset: section;
}

/* section+編號+: */
h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

編號 ol
section1-1:xxxxxxx
section1-2:xxxxxxx
section1-3:xxxxxxx

/*編號順序*/
ol {
  counter-reset: section;
  list-style-type: none;
}

/* section+編號+: */
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>