English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
regra face
O contador de counter de CSS ajuda a exibir números gerados com base em CSS de forma simples e incrementada para rastrear o uso das vezes. É semelhante a uma variável. Esses são mantidos pelo CSS e esses valores podem ser incrementados pelas regras CSS para rastrear o número de vezes que são usados. Sua principal função é calcular o número de vezes que um nó de elemento é usado, conforme especificado pelas regras.
A seguir está uma lista de atributos usados com os contadores de CSS:
counter-reset：para criar ou redefinir o contador.
counter-increment：para incrementar o valor do contador.
content：para inserir o conteúdo gerado.
counter() ou counters() função:para adicionar o valor do contador ao elemento.
Vamos dar um exemplo de como criar um contador para a página e incrementar o valor do contador para cada próximo elemento.
Veja o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Exemplo de contadores de CSS Counters</h1>
<h2>Java Tutorial</h2>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>Oracle Tutorial</h2>
<p><strong>Nota:</strong> IE8 No navegador, é necessário declarar!DOCTYPE.</p>
</body>
</html>Teste e veja‹/›Você também pode criar um contador dentro de um contador. Isso é chamado de contagem aninhada. Vamos usar um exemplo para demonstrar a contagem aninhada.
Veja o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Java tutorials:</h1>
<h2>Core Java tutorial</h2>
<h2>Servlet tutorial</h2>
<h2>Tutorial do JSP</h2>
<h2>Tutorial do Spring</h2>
<h2>Tutorial do Hibernate</h2>
<h1>Tutoriais de Tecnologia da Web:</h1>
<h2>Tutorial do HTML</h2>
<h2>Tutorial do CSS</h2>
<h2>Tutorial do jQuery</h2>
<h2>Tutorial do Bootstrap</h2>
<h1>Tutoriais de Banco de Dados:</h1>
<h2>Tutorial do SQL</h2>
<h2>Tutorial do MySQL</h2>
<h2>PL/>Tutorial do SQL</h2>
<h2>Tutorial do Oracle</h2>
<p><strong>Nota:</strong> Apenas o IE8apenas suporta esses atributos.</p>
</body>
</html>Teste e veja‹/›Nota:No exemplo acima, você pode ver que um contador foi criado para essa seção e outro contador aninhado chamado subsection foi criado dentro dessa seção.
Você pode usar contadores aninhados para criar listas de contorno. Isso ajuda a inserir strings entre contadores de níveis de aninhamento diferentes.
Veja o seguinte exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<h2>Contadores de Níveis de Nidificação Diferentes</h2>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<p><strong>Nota:</strong> Apenas o IE8apenas suporta esses atributos.</p>
</body>
</html>Teste e veja‹/›