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