如何使用 css 和 html 對產生從 1.1、1.2、1.3（而不僅僅是 1、2、3）開始的結果的列表進行排序

Question

如何使用 css 和 html 對產生看起來像 1.1、1.2、1.3（而不僅僅是 1、2、3……）的結果的列表進行排序？

到目前為止，輸出為，

對於下面的代碼，

HTML：

<ol>
<li>Lorem ipsum.</li>
<li>Excepteur sint occaecat cupidatat non proident:
    <ol>
        <li>sunt in culpa qui officia,</li>
        <li>deserunt mollit anim id est laborum.</li>
    </ol>
</li>
<li>Ut enim ad minim veniam.
    <ol>
        <li>Quis nostrud exercitation.</li>
        <li>Ullamco laboris nisi ut.
            <ol>
                <li>
                    Duis aute irure dolor
                </li>
            </ol>
        </li>
    </ol>
</li>

CSS：

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li li {
  margin: 0;
}

li li:before {
  content: counters(item, ".") " ";
}

但我需要得到結果，

JSfiddle

Answer 1

只需修改您的 HTML 以將您的所有列表都包含在 li 元素中，如下所示：

<ol>
  <li class="parent">
      /** Your HTML **/
  </li>
</ol>

並添加以下 css 以隱藏第一個編號：

li.parent:before { content: ""; }

在這里你可以找到演示。

Answer 2

只需從 CSS 中的li:before中取出多余的點(". ") ：

li:before {
content: counters(item, ".") ;
display: table-cell;
padding-right: 0.6em;    
}

這是演示

Answer 3

Please Use this css 
----------


  
 
  
  
  
 
   
 
    
ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
    content: counters(item, ".") "." counters(item, ".");
    display: table-cell;
    padding-right: 0.6em;    
}

li li {
    margin: 0;
}

li li:before {
    content: counters(item, ".") "." counter(item);
}
 
    
    <ol>
        <li>Lorem ipsum.</li>
        <li>Excepteur sint occaecat cupidatat non proident:
            <ol>
                <li>sunt in culpa qui officia,</li>
                <li>deserunt mollit anim id est laborum.</li>
            </ol>
        </li>
        <li>Ut enim ad minim veniam.
            <ol>
                <li>Quis nostrud exercitation.</li>
                <li>Ullamco laboris nisi ut.
                    <ol>
                        <li>
                            Duis aute irure dolor
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
 
   
 
  

Answer 4

您可以使用計數器來做到這一點！ 有序列表是否可以使用 css 生成看起來像 1.1、1.2、1.3（而不是 1、2、3、...）的結果？ 這是關於同一主題的另一個問題的回答：D