page - CSS: numeración de inicio anidada en 1.1
css numbers (1)
Tengo un conjunto anidado de temas / subtemas relacionados, usando <ol> . El CSS que tengo hasta ahora funciona muy bien desde la parte superior del árbol, pero los usuarios pueden hacer clic en subtemas, y estoy redibujando el conjunto anidado de <ol> , comenzando desde donde el usuario hizo clic. Mi problema es que necesito respetar los números de capítulo, etc.
Entonces, si una estructura típica puede ser esta:
Vehicles
1. Automobile
1.1 Street
1.1.1 Sedan
1.1.2 Coup
1.1.3 Truck
1.2 Race
1.2.1
2. Rail
2.1 Locomotive
2.2 High Speed
2.3 Uni
Y el usuario hace clic en 1.1 Street , necesito mostrar:
1.1 Street
1.1.1 Sedan
1.1.2 Coup
1.1.3 Truck
El CSS que tengo hasta ahora es este:
ol li {display:block;}
ol > li:first-child {counter-reset: item;}
ol > li {counter-increment: item; position: relative;}
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}
Probé algunas variaciones con un segundo contador, ¡pero sin dados! Para complicar este problema, el árbol puede ser infinitamente profundo, por lo que cualquier solución codificada está fuera. ¡Gracias!
Puede ajustar su lista en un bloque externo <ol><li> , luego actualice su CSS para mostrar el contador del contenido anidado
ol ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}
Aquí hay una demostración: