html - ol> li编号变得困惑

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我在HTML文件中使用ol>li，向其中添加了样式以使用诸如1、1.1、1.2、1.2.1等的分层编号。有时效果很好，但有时编号会变得混乱。而不是从下一个数字开始，它继续相同的层次结构。请参考所附图像instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on

这是我的CSS-

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0
}
ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: .6em
}
ol>li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: .3em;
  font-size: 14px;
}
li ol>li {
  margin: 0
}
li ol>li:before {
  content: counters(item, ".") " "
}
li ol>li:before {
  content: counters(item, ".") " ";
  font-size: small
}

<ol>
    <li>List Item 1
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 2
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 3
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 4
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
</ol>

最佳答案

这是干净的代码

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

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li>
  <li>
  four
  <ol>
     <li>Four.one</li>
     <li>Four.two</li>
    </ol>
  </li>
  </ol>
 

关于html - ol> li编号变得困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50678354/