CSS计数器在开始时具有特定计数

Question

是否可以从特定数字开始计数器以及具有特定计数的内部计数器。

类似的东西：

2 
  2.3
  2.4
  2.5
3
4

＆＃13;

＆＃13;

ol {
  list-style: none;
}
ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}
ol:first-of-type {
  counter-reset: mycounter;
}

＆＃13;

<ol>
  <li>Item 2
    <ol>
      <li>Item 2.3 </li>
      <li>Item 2.4</li>
       <li>Item 2.5</li>
      <li>Item  2.6</li>
       <li>Item 2.7</li>
      <li>Item  2.8</li>
    </ol>
  </li>
</ol>
<ol>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试以下解决方案

  

有关CSS计数器的更多帮助HERE

body {
  font: 13px Verdana;
}

ol {
  list-style: none;
}

.main {
  counter-reset: section 1;
}

.submain {
  counter-reset: subsection 2;
}

.submain1 {
  counter-reset: subsection 3;
}

ol.main>li {
  counter-reset: subsection;
}

ol li:before {
  color: red;
  counter-increment: section;
  content: counter(section) ". ";
}

ol li li:before {
  color: red;
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ". ";
}

<ol class="main">
  <li>Item 2
    <ol class="submain">
      <li>Item 2.3 </li>
      <li>Item 2.4</li>
      <li>Item 2.5</li>
      <li>Item 2.6</li>
      <li>Item 2.7</li>
      <li>Item 2.8</li>
    </ol>
  </li>
</ol>
<ol>
  <li>Item 3
    <ol class="submain1">
      <li>Item 3.4 </li>
      <li>Item 3.5</li>
      <li>Item 3.6</li>
      <li>Item 3.7</li>
      <li>Item 3.8</li>
      <li>Item 3.9</li>
    </ol>
  </li>
  <li>Item 4</li>
</ol>

Answer 2

查找以下解决方案。

＆＃13;

＆＃13;

 ol { counter-reset: item }
        li { display: block }
        li:before { content: counters(item, ".") " "; counter-increment: item }

＆＃13;

<ol>
        <li>Item 1
            <ol>
                <li>Item 1.1 
                    <ol>
                        <li>Item 1.1.1 </li>
                        <li>Item 1.1.2</li>
                    </ol>
                </li>
                <li>Item 1.2</li>
                <li>Item 1.3</li>
                <li>Item 1.4</li>
                <li>Item 1.5</li>
                <li>Item 1.6</li>
            </ol>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

ol {
  list-style: none;
}
ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}
ol:first-of-type {
  counter-reset: mycounter;
}

＆＃13;

<ol>
  <li>Item 2
    <ol>
      <li>Item 2.3 </li>
      <li>Item 2.4</li>
       <li>Item 2.5</li>
      <li>Item  2.6</li>
       <li>Item 2.7</li>
      <li>Item  2.8</li>
    </ol>
  </li>
</ol>
<ol>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

＆＃13;

＆＃13;

＆＃13;