Na verdade, os pseudoelementos em CSS são muito fáceis de usar, mas muitas vezes são ignorados por todos. Muitas pessoas agora podem apenas pensar que o valor do atributo content que é comumente usado em pseudoelementos suporta apenas strings. outros atributos de conteúdo comumente usados. Há também uri e contador. O que quero apresentar hoje é conter (contador).
Os contadores em CSS são semelhantes às variáveis. Eles podem implementar funções simples de contagem e exibir os resultados na página. Eles são amplamente utilizados nos primeiros sites. Para implementar um contador, você precisa usar os seguintes atributos:
Vamos dar uma olhada em como os contadores são usados em CSS.
1. Use contadores para numeração automática
Os contadores CSS incrementam variáveis de acordo com as regras.
Os contadores CSS usam as seguintes propriedades:
(1) counter-reset:name1 name2 cria ou redefine um contador (vários contadores podem ser definidos ao mesmo tempo, separados por espaços)
(2) contador-incremento: nome da variável de incremento da etapa (pode incrementar um ou mais)
(3) content:counter(name) insere o conteúdo gerado (usando pseudoelementos antes/depois)
(4) A função counter() ou counters() adiciona o valor do contador ao elemento
Ao criar um contador, ele deve ser criado na tag anterior ou na tag pai da tag. Se for definido em uma tag própria, será inválido.
Aplicações específicas:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Programação Dotcpp</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*Defina o tamanho do passo primeiro*/counter-increment:counter11;content:'Article 'counter(counter1)';}p::before{/*Defina o tamanho do passo primeiro*/counter-increment:counter21;content :'paragraph '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 em execução:
2. Inicializar contador
Para usar um contador, primeiro você precisa usar o atributo counter-reset para criar um contador. Esse processo é chamado de inicialização do contador. O formato de sintaxe do atributo counter-reset é o seguinte:
counter-reset: nenhum|[<identificador><inteiro>]
A descrição do parâmetro é a seguinte:
(1) nenhum: Evita reinicialização do contador;
(2) <identificador>: Define o nome do contador;
(3) <inteiro>: Define o valor inicial do contador. O valor padrão é 0 e pode ser um valor negativo.
3. O contador aumenta automaticamente
Após inicializar o contador, você pode usar o atributo counter-increment para especificar quando o contador será incrementado.
contra-incremento: nenhum|[<identificador><inteiro>]
A descrição do parâmetro é a seguinte:
(1) nenhum: evita que o contador aumente;
(2) <identificador>: Define o nome do contador a ser incrementado;
(3) <inteiro>: Defina o valor que o contador aumenta a cada vez. O valor padrão é 1 e pode ser um valor negativo.
4. Exibir contador
Finalmente, há como exibir o contador. Para exibir um contador você pode usar a função counter() ou counters(). A sintaxe dessas duas funções é a seguinte:
contador(nome)contadores(nome,string,tipo de estilo de lista)
A descrição do parâmetro é a seguinte:
(1) nome: o nome do contador;
(2) string: string usada para emenda quando contadores são usados aninhados;
(3) tipo de estilo de lista: O estilo exibido pelo contador pode ser qualquer valor do "atributo de tipo de estilo de lista" permitido em CSS.
O seguinte usa um exemplo simples para demonstrar o uso de contadores:
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- increment:section;}h5:before{content:Chaptercounter(chapter).;}h6:before{content:counter(chapter).counter(section);}</style></head><body><h5> Capítulo </h5><h6>Seção 1</h6><h6>Seção 2</h6><h6>Seção 3</h6><h6>Seção 4</h6><h5>Capítulo Capítulo 2</h5> <h6>Seção 1</h6><h6>Seção 2</h6><h6>Seção 3</h6><h6>Seção 4</h6></body> </html>Resultados em execução:
5. Contra-aninhamento
Além disso, os contadores também podem ser aninhados, e a função counters() pode ser usada para inserir uma string entre contadores aninhados em diferentes níveis, conforme mostrado no exemplo a seguir:
<!DOCTYPEhtml><html><head><style>ol{/*Crie uma nova instância de contador para cada elemento ol*/counter-reset:ol-list;list-style-type:none;}li:before{/ *Aumenta apenas a instância atual do contador*/counter-increment:ol-list;/*Aumenta os valores separados por "." para todas as instâncias do contador*/content:counters(ol-list,.),;} </style </head><body><ol><li>Volume</li><li>Capítulo<ol><li>Seção</li><li>Seção</li><li>Seção< ol>< li>seção </li><li>seção </li></ol></li><li>seção <ol><li>seção </li><li>seção </li>< li>seção </li></ol></li></ol></li><li>Capítulo</li><li>Capítulo</li></ol></body></html >Resultados em execução:
