html - How to make mu ordered list correctly? -

.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>

i want make ordered list table of contents book. however, there wrong code first level list item have number("1") not ("1.")

what can have dot after first level list item?

if want makes first level contains . , next level without ., can use nested selector. example:

.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>