一個風格的有序列表，其嵌套列表應該有一個數字使用CSS counter屬性

Question

信我想信從我的下<ol>像my question添加到<li> - 元素：

body { counter-reset: item; } 
 

 
ol.numbered_style li:before 
 
{ 
 
    counter-increment:item; 
 
    margin-bottom:5px; 
 
    margin-right:10px; 
 
    content:counter(item); 
 
    background:blue; 
 
    border-radius:100%; 
 
    color:white; 
 
    width:1.2em; 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 
ol.numbered_style.start_3{ 
 
    counter-reset: item 2; 
 
} 
 

 
ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style"> 
 
\t <li>first</li> 
 
\t <li>second</li> 
 
\t <li>third Lorem Ipsum 
 
\t \t <ol class="numbered_style start_3"> 
 
\t \t \t <li>missing an a after the number</li> 
 
\t \t \t <li>missing a b after the number</li> 
 
\t \t \t <li>missing a c after the number</li> 
 
\t \t </ol> 
 
\t </li> 
 
</ol>

我已嘗試，但這沒有奏效。我還想要一個解決方案，其中添加第二個計數器可以使用以下字母數字模式生成下一個元素，如 list-style-type: lower-alpha;

Answer 1

當然，您可以執行<ol>可以執行的任何操作。

ol.numbered_style.start_3{ 
    counter-reset: item2; 
} 

ol.numbered_style.start_3 li:before { 
    counter-increment:item2; 
    content:counter(item2, upper-latin); 
}/* List Style Type========^----------^*/ 

計數器列表樣式類型

• 小數--------------------------- ---- 1，2，3，...

• 十進制前導零-------------- 01,02,03，... 09,10， 11，...

• lower-alpha， lower-latin ----------- a，b，c，... z，aa，ab，...

• upper-alpha， upper-latin ---- ------ A，B，C，... Z，AA，AB，...

• lower-roman ------------------ ------ i，ii，iii，iv，v，vi，...

• upper-roman --------------------- --- I，II，III，IV，V，VI ......

• 星號-------------------------- --- *, **, ***, ...

REFERENCE

http://www.princexml.com/doc/5.1/counters/

SNIPPET

body { counter-reset: item; } 
 

 
ol.numbered_style li:before 
 
{ 
 
    counter-increment:item; 
 
    margin-bottom:5px; 
 
    margin-right:10px; 
 
    content:counter(item, upper-roman); 
 
    background:blue; 
 
    border-radius:100%; 
 
    color:white; 
 
    width:1.2em; 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 
ol.numbered_style.start_3{ 
 
    counter-reset: item2; 
 
} 
 

 
ol.numbered_style.start_3 li:before { 
 

 
    counter-increment:item2; 
 
    margin-bottom:5px; 
 
    margin-right:10px; 
 
    content:"3"counter(item2, upper-latin); 
 
    background:blue; 
 
    border-radius:100%; 
 
    color:white; 
 
    width:1.2em; 
 
    text-align:center; 
 
    display:inline-block; 
 
} 
 
    
 
ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style"> 
 
\t <li>first</li> 
 
\t <li>second</li> 
 
\t <li>third Lorem Ipsum 
 
\t \t <ol class="numbered_style start_3"> 
 
\t \t \t <li>missing an a after the number</li> 
 
\t \t \t <li>missing an b after the number</li> 
 
\t \t \t <li>missing an c after the number</li> 
 
\t \t </ol> 
 
\t </li> 
 
</ol>

Answer 2

嘗試了這一點：

ol.main { 
 
    counter-reset: item; 
 
} 
 
ol.main li { 
 
    counter-increment: item; 
 
} 
 
ol.numbered_style li:before { 
 
    margin-bottom: 5px; 
 
    margin-right: 10px; 
 
    content: counter(item); 
 
    background: blue; 
 
    border-radius: 100%; 
 
    color: white; 
 
    width: 1.2em; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
ol.numbered_style ol.numbered_style li { 
 
    counter-increment: subitem; 
 
} 
 
ol.numbered_style ol.numbered_style li:before { 
 
    content: counter(item) counter(subitem, lower-alpha); 
 
} 
 
ol.none, 
 
ul.none, 
 
ol.numbered_style { 
 
    list-style: none; 
 
}

<ol class="main numbered_style"> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third Lorem Ipsum 
 
    <ol class="numbered_style"> 
 
     <li>missing an a after the number</li> 
 
     <li>missing a b after the number</li> 
 
     <li>missing a c after the number</li> 
 
    </ol> 
 
    </li> 
 
</ol> 
 

 
<hr> 
 

 
<ol class="main numbered_style"> 
 
    <li>first</li> 
 
    <li>second</li> 
 
    <li>third Lorem Ipsum 
 
    <ol class="numbered_style"> 
 
     <li>missing an a after the number</li> 
 
     <li>missing a b after the number</li> 
 
     <li>missing a c after the number</li> 
 
    </ol> 
 
    </li> 
 
</ol>