Los pseudoelementos en CSS son en realidad muy fáciles de usar, pero a menudo todos los pasan por alto. Es posible que ahora muchas personas solo piensen que el valor del atributo de contenido que se usa comúnmente en los pseudoelementos solo admite cadenas. Otros atributos de contenido de uso común también son uri y contador. Lo que quiero presentar hoy es conter (contador).
Los contadores en CSS son similares a las variables. Pueden implementar funciones de conteo simples y mostrar los resultados en la página. Se usan ampliamente en los primeros sitios web. Para implementar un contador, necesita utilizar los siguientes atributos:
Echemos un vistazo a cómo se usan los contadores en CSS.
1. Utilice contadores para la numeración automática
Los contadores CSS incrementan las variables según las reglas.
Los contadores CSS utilizan las siguientes propiedades:
(1) reinicio de contador: nombre1 nombre2 crea o restablece un contador (se pueden definir varios contadores al mismo tiempo, separados por espacios)
(2) contraincremento: nombre de la variable de incremento de paso (puede incrementar uno o más)
(3) contenido: contador (nombre) inserta el contenido generado (usando pseudoelementos antes/después)
(4) La función contador() o contadores() agrega el valor del contador al elemento
Al crear un contador, debe crearse en la etiqueta anterior o en la etiqueta principal de la etiqueta. Si está definido en su propia etiqueta, no será válido.
Aplicaciones específicas:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Programación Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*Establecer el tamaño del paso primero*/counter-increment:counter11;content:'Article 'counter(counter1)';}p::before{/*Establecer el tamaño del paso primero*/counter-increment:counter21;content :'párrafo 'contador(contador1)';}</style></head><body><div><h2></h2><p></p><p></p><p >< /p><h2></h2><p></p><p></p><p></p><p></p></div></body></ html>Resultados de ejecución:
2. Inicializar contador
Para usar un contador, primero debe usar el atributo de reinicio del contador para crear un contador. Este proceso se llama inicializar el contador. El formato de sintaxis del atributo de reinicio del contador es el siguiente:
reinicio del contador: ninguno|[<identificador><entero>]
La descripción del parámetro es la siguiente:
(1) ninguno: evita el reinicio del contador;
(2) <identificador>: define el nombre del contador;
(3) <entero>: define el valor inicial del contador. El valor predeterminado es 0 y puede ser un valor negativo.
3. El contador aumenta automáticamente
Después de inicializar el contador, puede utilizar el atributo de incremento del contador para especificar cuándo se incrementará el contador. La sintaxis es la siguiente:
contraincremento: ninguno|[<identificador><entero>]
La descripción del parámetro es la siguiente:
(1) ninguno: evita que el contador aumente;
(2) <identificador>: define el nombre del contador que se incrementará;
(3) <entero>: define el valor que el contador aumenta cada vez. El valor predeterminado es 1 y puede ser un valor negativo.
4. Mostrador de visualización
Finalmente, se explica cómo mostrar el contador. Para mostrar un contador puede utilizar la función contador() o contadores(). La sintaxis de estas dos funciones es la siguiente:
contador(nombre)contadores(nombre,cadena,tipo-estilo-lista)
La descripción del parámetro es la siguiente:
(1) nombre: el nombre del mostrador;
(2) cadena: cadena utilizada para empalmar cuando se utilizan contadores anidados;
(3) tipo de estilo de lista: el estilo mostrado por el contador puede ser cualquier valor del "atributo de tipo de estilo de lista" permitido en CSS.
A continuación se utiliza un ejemplo sencillo para demostrar el uso de contadores:
<!DOCTYPEhtml><html><head><style>cuerpo{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:sección;}h5:before{content:Chaptercounter(capítulo).;}h6:before{content:counter(chapter).counter(sección);}</style></head><body><h5> Capítulo </h5><h6>Sección 1</h6><h6>Sección 2</h6><h6>Sección 3</h6><h6>Sección 4</h6><h5>Capítulo Capítulo 2</h5> <h6>Sección 1</h6><h6>Sección 2</h6><h6>Sección 3</h6><h6>Sección 4</h6></body> </html>Resultados de ejecución:
5. Contraanidamiento
Además, los contadores también se pueden anidar y la función contadores() se puede utilizar para insertar una cadena entre contadores anidados en diferentes niveles, como se muestra en el siguiente ejemplo:
<!DOCTYPEhtml><html><head><style>ol{/*Crear una nueva instancia de contador para cada elemento ol*/counter-reset:ol-list;list-style-type:none;}li:before{ / *Aumenta solo la instancia actual del contador*/counter-increment:ol-list;/*Aumenta los valores separados por "." para todas las instancias de contador*/content:counters(ol-list,.);} </style </head><body><ol><li>Volumen</li><li>Capítulo<ol><li>Sección</li><li>Sección</li><li>Sección< ol>< li>sección </li><li>sección </li></ol></li><li>sección <ol><li>sección </li><li>sección </li>< li>sección </li></ol></li></ol></li><li>Capítulo</li><li>Capítulo</li></ol></body></html >Resultados de ejecución:
