Diseñe una lista ordenada como “1.1, 1.2” en lugar de “1, 2”

NOTA:

Debido a algunas de las respuestas / comentarios a continuación (con lo que estoy de acuerdo), siento que esta pregunta es demasiado vaga y no explica suficientemente mi problema. Me apuré demasiado cuando lo armé, y esto ha provocado las respuestas incorrectas, por lo que acepto la falla. Debido a las respuestas y comentarios actuales, creo que incluso si volviera a editar esta pregunta, a los futuros espectadores les confundirían las respuestas / comentarios en la página, a menos que todos también los actualizaran. Debido a esto, he creado otra pregunta que aclara completamente mi problema. Una vez más, me disculpo por la confusión que causé en esta pregunta.

La pregunta aclarada se puede encontrar aquí: Estilo de una lista ordenada como “XX” basada en el atributo de inicio de lista


Estoy trabajando para actualizar el sitio web de un cliente que contiene una página de políticas. Dentro de la política hay nueve secciones diferentes, cada una con su propio contenido. Dentro de cada sección hay instrucciones de sección diferentes, que deben tener el sistema de numeración de “xx”. Sin embargo, esto no existe en HTML básico. Además, algunas secciones tienen diferentes formas de listas ordenadas dentro de sí mismas.


He determinado que no quiero abordar este problema de forma anidada, es decir, así:

  1. Section 1
    1. Item 1
    2. Item 2

Esta es la forma en que cada otra respuesta que he examinado trata el problema. Más bien, deseo abordarlo de esta manera (código para la muestra de abajo). Quiero una lista que simplemente muestre “x.1, x.2, x.3,” donde ‘x’ depende del número de inicio de esa lista en particular.

 

Section 1

Heading 1
  1. Item 1
  2. Item 2
  3. Item 3
Heading 2</strong
  1. Item 1
  2. Item 2
  3. Item 3

Section 2

    1. First subitem
    2. Second subitem
  1. Second Item
  2. Third Item

Section 3

  1. First item
    1. First subitem
    2. Second subitem
  2. Second item
  3. Third item

Section 4

  1. First item
  2. Second item
  3. Third item

Sección 1

Título
1.1 primer artículo
1.2 segundo elemento
1.3 tercer punto

Título 2
yo. Primer elemento
ii. Segundo artículo
iii. Tercer artículo

Sección 2

2.1 primer artículo
A. Primer subitem
B. Segundo subelemento
2.2 segundo punto
2.3 Tercer artículo

Seccion 3

3.1 Primer artículo
• Primer subitem
• Segundo subelemento
3.2 Segundo artículo
3.3 Tercer artículo

Sección 4

4.1 Primer artículo
4.2 segundo punto
4.3 Tercer artículo


De esta manera, puedo evitar el uso de una lista ordenada anidada y, con suerte, simplificar el asunto, especialmente el CSS necesario. Significará codificar algunos atributos de valor de inicio en cada lista ordenada, pero las secciones de la política no cambiarán con frecuencia, por lo que esto no debería importar.

No deseo usar JavaScript, ya que el cliente desea que se vea de esta manera, independientemente de la configuración del usuario. Las páginas son páginas JSP, por lo tanto, si hay una forma de configurarlo para generar dinámicamente, eso sería aceptable.

Ya he visto estos enlaces a continuación. Si bien son preguntas excelentes, ninguna de ellas responde a mi pregunta específica. El primero trata con listas ordenadas anidadas, mientras que yo trato con una lista ordenada única. El segundo tiene la idea correcta, pero sigue siendo un poco diferente (tiene “xxx”, mientras que solo quiero “xx”).

¿Puede la lista ordenada producir resultados que se parecen a 1.1?

Lograr la subnumeración en la lista ordenada

Por favor, hágamelo saber si necesito aclarar algo! ¡Gracias!


Resumen

En conclusión, el cliente desea una lista que comience en “x.1” y vaya tan lejos como sea necesario, donde “x” es un atributo de valor de inicio dado para la lista específica. Acabo de aclarar este asunto con ellos, que es la razón de esta “actualización” de los requisitos. Básicamente, necesito una clase que cambie el sistema de numeración del nivel superior de una lista al formato “xx” (de nuevo, donde la primera “x” es el valor inicial “). Cualquier sublista (listas anidadas) no seguirá esto Formato, pero seguirá otro formato según lo especificado por el atributo “tipo” o “estilo de lista”.

Tomó un tiempo para resolver esto!

aquí está mi violín

  h2.title { font-size: 20px; font-weight: 800; margin-left: -20px; padding: 12px; counter-increment: ordem; } li.heading { font-size: 16px; font-weight: bold; padding: 12px; list-style-type: none; } .bullet { counter-reset: bullet; padding-left: 12px; } .bullet li { list-style-type: none; } .bullet li:before { counter-increment: bullet; content: counter(ordem)"." counter(bullet)" "; } ol.none { list-style: none!important } li.s2sub::before { counter-increment: none!important; content: none!important; } li.s2sub { list-style: upper-alpha; } li.s3sub::before { counter-increment: none!important; content: none!important; } li.s3sub { list-style-type: circle; } li.roman::before { counter-increment: none!important; content: none!important; } li.roman { list-style: lower-roman inside; } 
  

    Section 1

  1. Heading 1
  1. text 1 one
  2. text 1 two
  3. text 1 three
  4. text 1 four
  • Heading 2
    1. Item 1
    2. Item 2
    3. Item 3

    Section 2

    1. First item
      1. First subitem
      2. Second subitem
    2. Second Item
    3. Third Item

    Section 3

    1. First item
      1. First subitem
      2. Second subitem
    2. Second item
    3. Third item

    Lo tengo para trabajar así:

     body{ counter-reset: section children; } li{ list-style:none; } .parent::before { counter-increment: section; content: counter(section) " - "; } .parent li:first-child{ counter-reset:children; } .parent li::before{ counter-increment: children; content: counter(section) "." counter(children) " - "; } 
     
    1. Section 1
      1. Item 1
      2. Item 2
    2. Section 2
      1. Item 1
      2. Item 2