นับ specificity แบบสั้น

รูปแบบ (a, b, c)

a = จำนวน id · b = จำนวน class / pseudo-class / attribute · c = จำนวน element / pseudo-element

Inline นับแยกเป็นชั้นเหนือชุดนี้

p             /* (0, 0, 1) */
.lead         /* (0, 1, 0) */
#hero         /* (1, 0, 0) */
nav ul li     /* (0, 0, 3) */
.menu li      /* (0, 1, 1) */
#hero .lead   /* (1, 1, 0) */
a:hover       /* (0, 1, 1)  — :hover นับในกลุ่ม b */

วิธีเทียบ

เทียบ a ก่อน ถ้าเท่าค่อยเทียบ b แล้วค่อย c · ถ้าเท่าทั้งหมด กฎที่มาก่อนในไฟล์แพ้กฎที่มาทีหลัง (เรียงตามลำดับแหล่ง)

เทคนิค: เมื่อกฎไม่ชนะตามใจ ให้เขียนคะแนนสองฝั่งลงกระดาษก่อน — อย่าเดา

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

เขียนคะแนน (a,b,c) ของ .card p, #main .card และ article > p ให้ครบสามอัน
นับ id / class / element แยกคอลัมน์
ปานกลาง