Rumah >hujung hadapan web >tutorial css >Bagaimana untuk mencipta nombor menggunakan sifat kenaikan songsang dalam CSS?
Bagaimana untuk mencipta nombor menggunakan sifat kenaikan songsang dalam CSS?
- 王林ke hadapan
- 2023-09-06 12:29:021153semak imbas
Sifat "counter-increment" yang diberikan dalam CSS digunakan untuk menambah atau menurunkan nilai kaunter yang boleh kami paparkan pada halaman web menggunakan CSS. Kaunter CSS sangat berguna apabila kita ingin mengira kejadian elemen HTML dalam halaman web.
Kami juga akan menggunakan sifat CSS "counter-reset" di sini, yang membantu kami menetapkan semula atau memulakan nilai pembilang CSS kepada nombor yang dikehendaki.
Tatabahasa
Anti-meningkat -
css-counter increment-value;
Di sini, css-counter merujuk kepada pemboleh ubah pembilang yang diisytiharkan dalam CSS, dan increment-value merujuk kepada nilai untuk menambah atau menurunkan pembilang CSS.
Tetapan semula balas: nilai tetapan semula kaunter css.
Di sini, pembilang css merujuk kepada pemboleh ubah pembilang yang diisytiharkan dalam CSS dan nilai tetapan semula merujuk kepada nilai yang anda ingin tetapkan semula pembilang.
Contoh 1
Dalam contoh ini, kami akan mencipta pembilang CSS untuk mengira kejadian teg "p" dan memaparkan kiraannya pada halaman web. Kami menetapkan kiraan awal kepada 0 dan menambah pembilang sebanyak 1 setiap kali teg "p" muncul.
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
}
p {
counter-increment: p-count;
}
p::before {
content: counter(p-count) ". ";
}
</style>
</head>
<body>
<h3>How to create numbering using counter-increment property in CSS?</h3>
<p>First paragraph</p>
<p>Second paragraph</p>
</body>
</html>
Contoh 2
Dalam contoh ini, kami akan mencipta 2 pembilang CSS untuk mengira kejadian teg "p" dan memaparkan kiraan pada halaman web. Kami akan mencipta struktur senarai bersarang di mana mula-mula kami akan memaparkan bilangan tag "p" dalam bentuk berangka dan kemudian bilangan tag "p" kelas "sub" dalam format angka Rom.
<html lang="en">
<head>
<title>How to create numbering using counter-increment property in CSS?</title>
<style>
body {
counter-reset: p-count;
}
.sub {
counter-reset: sub-count;
margin-left: 10px;
}
.par {
counter-increment: p-count;
}
.child {
counter-increment: sub-count;
}
.par::before {
content: counter(p-count) ". ";
}
.child::before {
content: counter(p-count, lower-roman) ". ";
}
</style>
</head>
<body>
<h3>How to create numbering using counter-increment property in CSS?</h3>
<p class="par">First paragraph</p>
<p class="par">Second paragraph</p>
<div class="sub">
<p class="child">Sub first</p>
<p class="child">Sub second</p>
</div>
</body>
</html>
Kesimpulan
Dalam artikel ini, kami mempelajari cara membuat nombor dan memaparkannya pada halaman web menggunakan sifat Tetapan Semula Balas dan Penambahan Balas yang disediakan oleh CSS. "set semula kaunter" membantu kami menetapkan semula pembilang kepada nilai tertentu dan "kenaikan balas" membantu kami menambah atau mengurangkan pembilang dengan nilai tertentu.
Atas ialah kandungan terperinci Bagaimana untuk mencipta nombor menggunakan sifat kenaikan songsang dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!