如何正確製作mu序列表？

Question

.book-summary ol { 
 
    counter-reset: item ; 
 
} 
 

 
.book-summary ol li { 
 
    margin-left:10px; 
 
    margin-top:5px; 
 
    display:block; 
 
} 
 

 
.book-summary ol li:before { 
 
    content: counters(item, ".") " "; counter-increment: item; 
 
}

<div class="book-summary"> 
 
     
 
     <ol> 
 
      <li>Component Location</li> 
 
      <li>Special Tools</li> 
 
      <li>Specifications 
 
      <ol> 
 
       <li>General Inforamation</li> 
 
       <li>Engine</li> 
 
       <li>CVT</li> 
 
      </ol> 
 
      </li> 
 
      <li>Torque Specifications</li> 
 
      <li>Troubleshooting</li> 
 

 
      <li>cfs</li> 
 
     </ol> 
 
     </div>

我想打一個有序列表像一本書目錄。 但是，我的代碼出現問題，我的第一級別列表項只有數字（「1」）而不是（「1.」）

我可以做些什麼來在我的第一級列表項後面有一個點？

Answer 1

如果要使第一個級別包含.而下一個級別沒有.，則可以使用嵌套選擇器。例如：

.book-summary ol { 
 
    counter-reset: item ; 
 
} 
 

 
.book-summary ol li { 
 
    margin-left:10px; 
 
    margin-top:5px; 
 
    display:block; 
 
} 
 
.book-summary ol li:before { 
 
    content: counters(item, ".") " "; counter-increment: item; 
 
} 
 
.book-summary > ol > li:before { 
 
    content: counters(item, ".") ". "; counter-increment: item; 
 
}

<div class="book-summary"> 
 
     
 
     <ol> 
 
      <li>Component Location</li> 
 
      <li>Special Tools</li> 
 
      <li>Specifications 
 
      <ol> 
 
       <li>General Inforamation</li> 
 
       <li>Engine</li> 
 
       <li>CVT</li> 
 
      </ol> 
 
      </li> 
 
      <li>Torque Specifications</li> 
 
      <li>Troubleshooting</li> 
 

 
      <li>cfs</li> 
 
     </ol> 
 
     </div>