LabEx
EntrarÚnete

Contadores de listas anidadas con CSS

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos el uso de contadores CSS para crear contadores de listas personalizados. En particular, aprenderemos cómo inicializar e incrementar variables de contador, y cómo mostrar el valor de estas variables utilizando la función counters(). Al final de este laboratorio, serás capaz de crear contadores de listas anidadas y personalizar la apariencia de los elementos de lista utilizando CSS.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Contador

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un contador de lista personalizado que cuente los elementos de lista anidados, siga estos pasos:

  1. Utilice counter-reset para inicializar una variable de contador (valor predeterminado 0), con el nombre siendo el valor del atributo (por ejemplo, counter).
  2. Utilice counter-increment en la variable de contador para cada elemento contable (por ejemplo, cada <li>).
  3. Utilice counters() para mostrar el valor de cada variable de contador como parte del content del pseudo-elemento ::before para cada elemento contable (por ejemplo, cada <li>). El segundo valor que se le pasa ('.') actúa como el delimitador para los contadores anidados.

A continuación, se muestra un ejemplo de código HTML:

<ul>
  <li>Elemento de lista</li>
  <li>Elemento de lista</li>
  <li>
    Elemento de lista
    <ul>
      <li>Elemento de lista</li>
      <li>Elemento de lista</li>
      <li>Elemento de lista</li>
    </ul>
  </li>
</ul>

Y aquí está el código CSS para aplicar el contador de lista personalizado:

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Contadores. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.