Mi ejemplo de código:
.list { counter-reset: section; } .item::before { counter-increment: section; content: counters(section, ".") '. '; } .list .list .item { margin-left: 30px; } <div class='list'> <div class='item'>item</div> <div class='item'>item <div class='list'> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item </div> </div> </div> <div class='item'>item</div> <div class='item'>item</div> </div>Los resultados del código anterior:
1. item 2. item 2.1. item 2.2. item 2.3. item 3. item 4. itemQuiero que los elementos secundarios no tengan un índice principal, como el siguiente:
1. item 2. item 1. item 2. item 3. item 3. item 4. itemSoy consciente de que esto se puede lograr con un contador separado para cada nivel, pero luego debe escribir el CSS para cada contador. En mi caso de uso real, hay niveles impredecibles y no controlo el HTML. Podría haber 50 niveles y posiblemente no pueda escribir todos los 50 conjuntos de reglas CSS. Es por eso que uso la función counters(), que maneja múltiples niveles automáticamente. La pregunta es que la función counters() viene con el índice principal. ¿Es posible deshacerse de él?
Si CSS puro no puede hacerlo, ¿podemos hacerlo con la ayuda de JS?
Parece gracioso, pero podrías usar counter() no counters() :
.list { counter-reset: section; } .item::before { counter-increment: section; content: counter(section) '. '; } .list .list .item { margin-left: 30px; } <div class='list'> <div class='item'>item</div> <div class='item'>item <div class='list'> <div class='item'>item</div> <div class='item'>item <div class='list'> <div class='item'>item</div> <div class='item'>item</div> <div class='item'>item </div> </div> </div> <div class='item'>item </div> </div> </div> <div class='item'>item</div> <div class='item'>item</div> </div> Por cierto, es extraño hacer listas con <div> s cuando <ul> y <ol> están disponibles y destinados exactamente para ese propósito.