如何制作有序列表 go 1. 1.1, 1.2, A, B, C, 1.3, 1.4

Question

由於我沒有在 StackOverflow 上找到滿足我想要做的事情的需求的帖子，所以我提出了一個新問題來解決我的問題。

我正在嘗試構建一個有序列表，我想在其中擁有：

1.
  1.1
     A
     B
     C
  1.2
  1.3

目前，我有以下內容：

1.
  1.1
     1.1.1
     1.1.2
     1.1.3
  1.2
  1.3

不過，我嘗試了一些沒有運氣的事情，所以如果我能得到一些幫助，我將不勝感激。

這可能是我想要做的嗎？ 如果是，如何？ 如果不是，為什么？

 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: 10px; } li li:before { content: counters(item, ".") " "; }.bolder { font-size: 1.17em; font-weight: bolder; margin: 0px; }.parent::before { font-size: 1.17em; font-weight: bolder; }

 <li class="parent"> <p class="bolder">How I want it to look like</p> <ol> <li>This is 1.1 <ol> <li class="subItem"> This is what I want to be A </li> <li class="subItem"> This is what I want to be B </li> <li class="subItem"> This is what I want to be C </li> </ol> </li> <li> Then it continues on with 1.2 </li> <li> Then 1.3.. etc. </li> </ol> </li>

Answer 1

我認為解決此問題的最佳方法是將 class 分配給要顯示字母樣式的列表，然后在該 class 中使用 list-style-type:upper-alpha 。

Answer 2

如果你想定位li的第三級，你可以使用ol ol ol li選擇器。 要使用大寫字母，您可以使用counter()而不是counters() ，因為使用counters()生成的文本是所有計數器的值，而使用counter()它只是最內層計數器的值。

如果將計數器樣式設置為大寫upper-alpha ，則標記將是大寫字母。

 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: 10px; } li li:before { content: counters(item, ".") " "; }.bolder { font-size: 1.17em; font-weight: bolder; margin: 0px; }.parent::before { font-size: 1.17em; font-weight: bolder; } ol ol ol li:before { content: counter(item, upper-alpha); }

 <ol> <li class="parent"> <p class="bolder">How I want it to look like</p> <ol> <li>This is 1.1 <ol> <li class="subItem"> This is what I want to be A </li> <li class="subItem"> This is what I want to be B </li> <li class="subItem"> This is what I want to be C </li> </ol> </li> <li> Then it continues on with 1.2 </li> <li> Then 1.3.. etc. <ol> <li class="subItem"> This is what I want to be A </li> <li class="subItem"> This is what I want to be B </li> </ol> </li> </ol> </li> </ol>