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

การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS

กำหนดรูปแบบองค์ประกอบตามค่าแอตทริบิวต์ข้อมูลอย่างมีเงื่อนไข

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

ตัวเลือกแอตทริบิวต์ CSS

ตัวเลือกแอตทริบิวต์ CSS จะจับคู่องค์ประกอบตามการมีอยู่และค่าของแอตทริบิวต์: [data-state] จะจับคู่องค์ประกอบใด ๆ ที่มีแอตทริบิวต์ data-state ส่วน [data-state="active"] จะจับคู่เฉพาะเมื่อค่าตรงกับ "active"

ตัวเลือกตรวจสอบการมีอยู่

[data-tooltip] จะจับคู่องค์ประกอบที่มีแอตทริบิวต์ data-tooltip โดยไม่สนใจค่า ใช้ตัวเลือกนี้เพื่อกำหนดรูปแบบพื้นฐานของคำแนะนำเครื่องมือให้กับองค์ประกอบใด ๆ ที่มีข้อมูลคำแนะนำเครื่องมือแนบอยู่ ก่อนพิจารณาเนื้อหาของคำแนะนำเครื่องมือ

ตัวเลือกจับคู่แบบตรงทั้งหมด

[data-theme="dark"] จะจับคู่เฉพาะองค์ประกอบที่ data-theme มีค่าเท่ากับ "dark" ทุกประการ วิธีนี้ช่วยจัดรูปแบบตามชุดรูปแบบ โดยใช้โทนสีเข้มเมื่อองค์ประกอบ html มี data-theme="dark" ที่กำหนดโดย JavaScript

ตัวเลือกจับคู่บางส่วน

[data-icon^="arrow"] จะจับคู่ค่าที่ขึ้นต้นด้วย "arrow" [data-label$="ing"] จะจับคู่ค่าที่ลงท้ายด้วย "ing" ส่วน [data-tag*="feature"] จะจับคู่ค่าที่มีคำว่า "feature" อยู่ภายใน ตัวเลือกเหล่านี้ช่วยให้จัดรูปแบบตามรูปแบบของค่าได้โดยไม่ต้องเพิ่มคลาสจำนวนมาก

เครื่องสถานะด้วย data-*

จำลองสถานะคอมโพเนนต์ด้วยแอตทริบิวต์ data-state: [data-state="idle"], [data-state="loading"], [data-state="error"] กฎ CSS สำหรับแต่ละสถานะจะเข้ามาแทนที่ชื่อคลาสแบบมีเงื่อนไขหลายชื่อ ทำให้สถานะอยู่ในแอตทริบิวต์เดียวและแยกการจัดรูปแบบได้อย่างชัดเจน

[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }

ความจำเพาะของตัวเลือกแอตทริบิวต์

ตัวเลือกแอตทริบิวต์มีความจำเพาะเท่ากับตัวเลือกคลาส (0,1,0) เมื่อนำมารวมกับตัวเลือกองค์ประกอบ: button[data-variant="primary"] จะมีความจำเพาะเป็น (0,1,1) ควรวางแผนความจำเพาะของตัวเลือกแอตทริบิวต์ควบคู่กับกฎที่ใช้คลาส เพื่อหลีกเลี่ยงความขัดแย้ง

รูปแบบคำแนะนำเครื่องมือ

สร้างคำแนะนำเครื่องมือด้วย CSS ล้วนโดยใช้ data-tooltip: ใช้ ::after { content: attr(data-tooltip) } เมื่อวางเมาส์เหนือองค์ประกอบ ฟังก์ชัน content: attr() จะอ่านค่าแอตทริบิวต์และใช้เป็นเนื้อหาขององค์ประกอบเสมือน โดยไม่ต้องใช้ JavaScript หรือองค์ประกอบ HTML เพิ่มเติม

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

data-* เทียบกับคลาสสำหรับการจัดรูปแบบ

ใช้คลาสเพื่อสื่อเจตนาในการจัดรูปแบบ เช่น is-active และ has-error และใช้แอตทริบิวต์ข้อมูลสำหรับข้อมูลที่ส่งมา เช่น data-user-id และ data-count เมื่อแอตทริบิวต์เดียวกันขับเคลื่อนทั้งพฤติกรรม โดย JS อ่านค่า และการจัดรูปแบบ โดย CSS เลือกค่า แอตทริบิวต์ data-* จะช่วยลดข้อมูลซ้ำระหว่าง JS กับ CSS

การรวมตัวเลือก data-*

เชื่อมตัวเลือกแอตทริบิวต์หลายตัวเข้าด้วยกัน: [data-type="button"][data-size="large"] จะจับคู่องค์ประกอบที่กำหนดแอตทริบิวต์ทั้งสองรายการ วิธีนี้สร้างการจับคู่แบบผสมโดยไม่ต้องใช้คลาสรวมอย่าง .button-large จึงช่วยลดจำนวนคลาสที่เพิ่มขึ้น

หมายเหตุด้านประสิทธิภาพ

ตัวเลือกแอตทริบิวต์ใช้เวลาในการประมวลผลรูปแบบช้ากว่าตัวเลือกคลาสเล็กน้อย สำหรับรูปแบบคงที่ โปรดเลือกใช้คลาส ใช้ตัวเลือกแอตทริบิวต์เมื่อค่าของแอตทริบิวต์เป็นตัวกำหนดรูปแบบ เช่น data-state หรือ data-theme และมีการเปลี่ยนแปลงขณะทำงาน ซึ่งในกรณีนี้แอตทริบิวต์เดียวจะเข้ามาแทนที่คลาสหลายคลาสที่ต้องสลับ

ความไวต่อตัวพิมพ์

โดยค่าเริ่มต้น การจับคู่ค่าแอตทริบิวต์ใน HTML จะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ แต่ไม่เป็นเช่นนั้นสำหรับรหัสภาษาใน XHTML เพิ่มแฟล็ก i เพื่อจับคู่โดยไม่คำนึงถึงตัวพิมพ์: [data-state="Active" i] จะจับคู่กับ "active", "Active" และ "ACTIVE"

ตรวจสอบความรู้

ตัวเลือก CSS [data-state="loading"] .spinner ทำหน้าที่อะไร

สรุป

ตัวเลือกแอตทริบิวต์ CSS จะจับคู่แอตทริบิวต์ data-* ตามการมีอยู่ ค่าที่ตรงทั้งหมด หรือรูปแบบบางส่วน เมื่อนำมารวมกับ content: attr() สำหรับคำแนะนำเครื่องมือและ data-state สำหรับเครื่องสถานะของคอมโพเนนต์ แอตทริบิวต์ data-* จึงทำหน้าที่เป็นทั้งตัวนำส่งข้อมูลและจุดเชื่อมสำหรับการจัดรูปแบบ CSS โดยไม่ทำให้จำนวนคลาสเพิ่มขึ้น

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

บทเรียน “การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS”

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

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

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

บทเรียน “การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ไวยากรณ์ data-* และแบบแผนการตั้งชื่อ
  2. การเข้าถึง data-* ด้วย dataset ใน JavaScript
  3. การใช้ data-* กับตัวเลือกแอตทริบิวต์ CSS
  4. รูปแบบการใช้งานจริง: คำแนะนำเครื่องมือและการติดตามสถานะ
← กลับไปที่ HTML Academy