CSS Academy · Pelajaran

Pembilang CSS dengan ::before

Cipta sistem penomboran automatik menggunakan pembilang CSS dan fungsi counter().

Pelajaran 3 daripada 413 langkah

Pembilang CSS dengan ::before ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah Pembilang CSS?

Pembilang CSS ialah pemboleh ubah yang diselenggara oleh CSS, dengan nilai yang boleh ditambah dan dipaparkan dalam kandungan yang dijana. Pembilang membolehkan penomboran automatik tanpa JavaScript atau pengurusan nombor secara manual dalam HTML.

counter-reset

counter-reset memulakan (atau menetapkan semula) pembilang. Letakkannya pada unsur yang mengandungi item untuk dikira.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment menambah pembilang sebanyak 1 (lalai) setiap kali digunakan. Letakkannya pada item yang berulang.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Fungsi counter() dalam content

Paparkan nilai pembilang semasa menggunakan counter(name) dalam sifat content sesuatu pseudoelemen.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Pembilang Langkah Bergaya

Komponen langkah bernombor lengkap tanpa JavaScript:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

Nilai Permulaan Pembilang

Tetapkan nombor permulaan tersuai dalam counter-reset:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Gaya Pembilang

Gunakan argumen kedua untuk counter() bagi menentukan jenis gaya senarai:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Pembilang Bersarang dengan counters()

counters(name, separator) (dengan huruf "s") mencipta penomboran bersarang seperti "1.1", "1.2", "2.1":

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

Menetapkan Semula pada Senarai Bersarang

Setiap ol bersarang mewarisi skop pembilang. Fungsi counters() menggunakan keseluruhan rantaian pembilang secara automatik.

Penomboran Seksyen

Berikan nombor secara automatik kepada tajuk dalam dokumen yang panjang:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

Jadual Kandungan dengan Pembilang

Pembilang CSS secara tradisinya digunakan untuk jadual kandungan dan dokumen berformat. Pada masa kini, perkara ini sering dikendalikan oleh rangka kerja JavaScript, tetapi pembilang CSS kekal sebagai pilihan CSS tulen.

Semakan Pantas

Sifat manakah yang menambah pembilang CSS pada setiap unsur sepadan?

Jawab dalam pelajaran interaktif

Imbas Kembali

Pembilang CSS membolehkan penomboran automatik tanpa JavaScript. Gunakan counter-reset pada bekas, counter-increment pada item yang berulang, dan paparkan nilainya dengan counter(name) dalam content sesuatu pseudoelemen. counters() mengendalikan penomboran bersarang dengan pemisah.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pembilang CSS dengan ::before” percuma?

Ya — teks penuh “Pembilang CSS dengan ::before” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pembilang CSS dengan ::before”?

Cipta sistem penomboran automatik menggunakan pembilang CSS dan fungsi counter(). Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Pembilang CSS dengan ::before” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy