css计数器（counter）是什么
本篇文章给大家带来的内容是介绍css计数器（counter）是什么，让大家简单的了解css计数器的相关属性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
css计数器是什么？
计数器是css3提供的一个强大的工具，是一种可以让我们使用CSS给元素自动编号的方法。使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。但与有序列表相比，css计数器可以对任意元素计数，同时还可以实现个性化计数。【相关视频教程推荐：CSS3教程】
css计数器的相关属性
1、counter-reset
counter-reset属性用于定义和初始化一个或多个CSS计数器。它可以使用一个或多个标识符作为值，该值指定计数器的名称。
使用语法：
counter-reset: [ <标识符> <整数>? ]+ | none | inherit
每个计数器名称后面都可以跟一个可选的<整数>值，该值指定计数器的初始值。
注意：
1）、关键字none，inherit和initial不能作为计数器名称；关键字none，inherit可以作为计counter-reset属性的值。
设置none将取消设置计数器；设置inherit将从元素的父元素处继承counter-reset值。该counter-reset属性的默认值为none。
2）、计数器的初始值不是计数器显示时的第一个数字/值。
这意味着如果希望计数器从1开始显示，则需要将counter-reset中的初始值设置为零。0是默认的初始值，所以如果省略它，默认情况下它将重置为零；counter-reset允许使用负值。因此，如果希望计数器从零开始显示，可以将其初始值设置为-1。
示例：
someSelector{
counter-reset: counterA; /*计数器counterA 初始，初始值为0*/
counter-reset: counterA 6; /*计数器counterA 初始，初始值为6*/
counter-reset: counterA 4 counterB; /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为0*/
counter-reset: counterA 4 counterB 2; /*计数器counterA 初始，初始值为4，计数器counterB 初始，初始值为2*/
}2、counter-increment
counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值，指定要递增的计数器的名称。
使用语法：
counter-increment: [ <标识符> <整数>? ]+ | none | inherit
每个计数器名称（标识符）后面都可以跟一个可选<整数>值，该值指定对于我们所编号的元素每次出现时，计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数，则计数器被递减。
counter-increment属性必须和counter-reset属性配合使用，下面我们来看看示例：
article { /* 定义和初始化计数器 */
counter-reset: section; /* 'section' 是计数器的名称 */
}
article h2 { /* 每出现一次h2,计数器就增加1 */
counter-increment: section; /* 相当于计数器增量：第1节； */
}3、counter()函数
counter()函数必须和content属性一起使用，用来显示CSS计数器。它以CSS计数器名称作为参数，并作为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。
例：
h2:before {
content: counter(section);
}counter()函数有两种形式：counter(name)和counter(name, style)。
name参数就是要显示的计数器的名称；使用counter-reset属性就可以指定计数器的名称。
style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化 ， 也就是说，计数器会以数字的形式生成 内容；但其实，css list-style-type属性的所有可用样式也可用于计数器。这意味着您可以创建十进制数字计数器，显示为罗马字符的计数器，低字母字符等。以下是所有可能的计数器样式：
disc：实心圆 样式
circle：空心圆 样式
square：实心方块 样式
decimal：阿拉伯数字 样式
lower-roman：小写罗马数字 样式
upper-roman：大写罗马数字 样式
lower-alpha：小写英文字母 样式
upper-alpha：大写英文字母 样式
none：不使用项目符号
armenianl：传统的亚美尼亚数字 样式
cjk-ideographic：浅白的表意数字 样式
georgian：传统的乔治数字 样式
lower-greek：基本的希腊小写字母 样式
hebrew：传统的希伯莱数字 样式
hiragana：日文平假名字符 样式
hiragana-iroha：日文平假名序号 样式
katakana：日文片假名字符 样式
katakana-iroha：日文片假名序号 样式
lower-latin：小写拉丁字母 样式
upper-latin：大写拉丁字母 样式
以下是指定使用lower-roman字符显示计数器的示例：
ul li:before {
content: counter(my-counter, lower-roman);
}4、counters()函数
counters()函数也必须和content属性一起使用，用来显示CSS计数器。和counter(）函数一样，counters()函数也作为值传递给content属性；然后，content属性在使用:before伪元素将计数器显示为生成的内容。
counters()函数也有两种形式：counters(name, string)和counters(name, string, style)。
name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。
而counters()函数与counter(）函数（单数形式）区别在于：counters() 函数可以用于设置嵌套计数器。
嵌套计数器是用于为嵌套元素（如嵌套列表）提供自动编号。如果您要将计数器应用于嵌套列表，则可以对第一级项目进行编号，例如，1，2，3等。第二级列表项目将编号为1.1，1.2，1.3等。第三级项目将是1.1.1，1.1.2，1.1.3，1.2.1，1.2.2，1.2.3等。
string参数用作不同嵌套级别的数字之间的分隔符。例如，在'1.1.2'中，点（'.'）用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符，则它可能如下所示：
content: counters(counterName, ".");
如果希望嵌套计数器由另一个字符分隔，例如，如果希望它们显示为“1-1-2”，则可以使用短划线而不是点作为字符串值：
content: counters(counterName, "-");
和counter(）函数一样，style参数是用来定义计数器的风格。默认情况下，计数器使用十进制数字格式化。具体关于style参数的设置可以参照counter(）函数的style参数。
以下是一个示例，指定嵌套计数器将使用lower-roman字符显示，并使用点作为分隔符：
ul li:before {
content: counters(my-counter, ".", lower-roman);
}css计数器（counter）的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tester</title>
<style type="text/css">
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment: section;
content: counter(section) ".";
}
h3:before{
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>css计数器教程</h1>
<h3>css计数器</h3>
<h3>css计数器的相关属性</h3>
<h3>示例说明</h3>
<h1>css计数器教程</h1>
<h3>css计数器</h3>
<h3>css计数器的相关属性</h3>
<h3>示例说明</h3>
</body>
</html>效果图：
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
Atas ialah kandungan terperinci css计数器（counter）是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
css3 apakah itu susun atur penyesuaian
Jun 02, 2022 pm 12:05 PM
Reka letak adaptif, juga dikenali sebagai "susun atur responsif", merujuk kepada susun atur halaman web yang boleh mengecam lebar skrin secara automatik dan membuat pelarasan yang sepadan dengan halaman web sedemikian boleh serasi dengan berbilang terminal berbeza dan bukannya membuat versi khusus untuk setiap terminal. . Reka letak penyesuaian dilahirkan untuk menyelesaikan masalah penyemakan imbas web mudah alih, dan boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Adakah kesan animasi css3 mempunyai ubah bentuk?
Apr 28, 2022 pm 02:20 PM
Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
