如何正确制作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>