ฝึก selectors และ specificity

สร้างหน้ารายการเมนูสั้น ๆ แล้วฝึกเลือกเป้าและสถานะ

• ใช้ descendant หรือ child อย่างน้อยหนึ่งกฎ

• ใช้ h2 + p หรือ adjacent อื่นอย่างน้อยหนึ่งครั้ง

• ใส่ :hover และ :focus ให้ลิงก์หรือปุ่ม

• มีสถานการณ์กฎทับกัน แล้วอธิบายได้ว่าใครชนะเพราะอะไร

• ไม่ใช้ !important

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

ทำตามสเปกด้านบนให้ครบ

เขียนคะแนน specificity ข้าง ๆ กฎที่ทับกัน

ปานกลาง

ใช้ :nth-child(odd) กับรายการ li ให้แถวคี่พื้นหลังต่างจากแถวคู่

ง่าย

จงใจใส่ !important แล้วลบออก แล้วแก้ด้วย selector แทน

ยาก