0Pricing
CSS Academy · บทเรียน

ตัวนับ CSS ด้วย ::before

สร้างระบบลำดับเลขอัตโนมัติโดยใช้ตัวนับ CSS และฟังก์ชัน counter()

ตัวนับ CSS ด้วย ::before เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

ตัวนับ CSS คืออะไร

ตัวนับ CSS คือตัวแปรที่ CSS จัดการค่าให้ โดยสามารถเพิ่มค่าและแสดงผลในเนื้อหาที่สร้างขึ้นได้ ตัวนับเหล่านี้ช่วยให้สร้างหมายเลขอัตโนมัติได้โดยไม่ต้องใช้ JavaScript หรือจัดการหมายเลขด้วยตนเองใน HTML

counter-reset

counter-reset ใช้กำหนดค่าเริ่มต้นหรือรีเซ็ตตัวนับ ควรวางไว้บนองค์ประกอบที่ครอบรายการซึ่งต้องการนับ

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

counter-increment

counter-increment เพิ่มค่าตัวนับทีละ 1 (ค่าเริ่มต้น) ทุกครั้งที่มีการนำไปใช้ ควรวางไว้บนรายการที่เกิดซ้ำ

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

ฟังก์ชัน counter() ใน content

แสดงค่าปัจจุบันของตัวนับโดยใช้ counter(name) ในพร็อพเพอร์ตี content ขององค์ประกอบเทียม

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

ตัวนับขั้นตอนที่จัดรูปแบบแล้ว

องค์ประกอบขั้นตอนแบบมีหมายเลขที่สมบูรณ์โดยไม่ใช้ 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>

ค่าเริ่มต้นของตัวนับ

กำหนดหมายเลขเริ่มต้นแบบกำหนดเองใน counter-reset:

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

รูปแบบตัวนับ

ใช้อาร์กิวเมนต์ตัวที่สองของ counter() เพื่อระบุประเภทรูปแบบรายการ:

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

ตัวนับซ้อนกันด้วย counters()

counters(name, separator) (ที่มี "s" ต่อท้าย) สร้างหมายเลขแบบซ้อนกัน เช่น "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>

การรีเซ็ตในรายการซ้อนกัน

ol ที่ซ้อนกันแต่ละรายการจะสืบทอดขอบเขตของตัวนับ ฟังก์ชัน counters() จะใช้ลำดับตัวนับทั้งหมดโดยอัตโนมัติ

การกำหนดหมายเลขส่วนต่าง ๆ

กำหนดหมายเลขหัวข้อในเอกสารขนาดยาวโดยอัตโนมัติ:

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

สารบัญด้วยตัวนับ

ในอดีตมักใช้ตัวนับ CSS กับสารบัญและเอกสารที่จัดรูปแบบแล้ว ปัจจุบันงานนี้มักจัดการด้วยเฟรมเวิร์ก JavaScript แต่ตัวนับ CSS ยังคงเป็นตัวเลือกที่ใช้ CSS ล้วน

ตรวจสอบความเข้าใจ

พร็อพเพอร์ตีใดใช้เพิ่มค่าตัวนับ CSS ในแต่ละองค์ประกอบที่ตรงเงื่อนไข

สรุปทบทวน

ตัวนับ CSS ช่วยสร้างหมายเลขอัตโนมัติโดยไม่ต้องใช้ JavaScript ให้ใช้ counter-reset กับองค์ประกอบบรรจุ ใช้ counter-increment กับรายการที่เกิดซ้ำ และแสดงค่าด้วย counter(name) ในพร็อพเพอร์ตี content ขององค์ประกอบเทียม ส่วน counters() ใช้จัดการหมายเลขแบบซ้อนกันด้วยตัวคั่น

คำถามที่พบบ่อย

บทเรียน “ตัวนับ CSS ด้วย ::before” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวนับ CSS ด้วย ::before” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวนับ CSS ด้วย ::before”

สร้างระบบลำดับเลขอัตโนมัติโดยใช้ตัวนับ CSS และฟังก์ชัน counter() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวนับ CSS ด้วย ::before” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เนื้อหา ::before และ ::after
  2. ::placeholder ::selection และ ::marker
  3. ตัวนับ CSS ด้วย ::before
  4. ลวดลายตกแต่งด้วยองค์ประกอบเสมือน
← กลับไปที่ CSS Academy