如何在 CSS 中重置有序列表編號

Question

如何重置嵌套有序列表的編號。

運行這個片段，給我一個這樣的輸出：

• 清單 1
• 清單 2

• 清單 3

  1. 清單 1
  2. 清單 2

  3. 清單 3

     • 清單 1
     • 清單 2

     • 清單 3

        3.1. List 1 3.2. List 2 3.3. List 3 3.3.1. List 1 3.3.2. List 2 3.3.3. List 3 3.3.3.1. List 1 3.3.3.2. List 2 3.3.3.3. List 3

我希望 3.1 從 1 開始。我該怎么做？ 我需要使用多個計數器嗎？ 還是一個人就行？ 我並沒有真正習慣於使用 CSS 計數器。 如果它是一系列嵌套的有序列表，則該代碼有效，但是當其中有一個無序列表時，它開始失敗。 它仍然繼續上一個有序列表的編號。

 ol { counter-reset: item 0; list-style: none; } ul { counter-reset: item ""; } ul:first-child>li { counter-reset: item ""; } ul>li:before { content: " "; margin-right: 1em; } ol ul li:last-child { counter-reset: item ""; } ol>li:before { counter-increment: item; content: counters(item, ".")". "; }

 <ul class="ul"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3<ul class="ul"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3</li> </ol> </li> </ol> </li> </ol> </li> </ul> </li> </ol> </li> </ul>

編輯：即使有多個重置計數器，我仍然無法做到這一點。 這有希望嗎？

Answer 1

你可以查看我的案例：

我們只需要重置第一個孩子

.tos ol > li {
    counter-increment: listNumbering;
    list-style: none;
}
.tos ol > li:before {
    content: counter(listNumbering) '. ';
}
.tos ol > li:first-child {
    counter-reset: listNumbering;
}

Answer 2

當ol位於ol中的ul中時，您想要的是一個新的、不同的計數器：

 ol { counter-reset: item 0; list-style: none; } ol>li:before { counter-increment: item; content: counters(item, ".")". "; } ol ul ol { counter-reset: subitem 0; } ol ul ol>li:before { counter-increment: subitem; content: counters(subitem, ".")". "; }

 <ul class="ul"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3</li> </ol> </li> <li class="li">List 2</li> <li class="li">List 3 <ul class="ul"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">Sub List 1</li> <li class="li">List 2 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3</li> </ol> </li> </ol> </li> <li class="li">List 3 <ol class="ol"> <li class="li">List 1</li> <li class="li">List 2</li> <li class="li">List 3</li> </ol> </li> </ol> </li> </ul> </li> </ol> </li> </ul>

Answer 3

根據w3 文檔，您可以直接定義value prop 來實現它。

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>