แก้การทับโดยไม่ใช้ !important

ลำดับแก้ที่แนะนำ

1) เปิด DevTools ดูว่ากฎไหนถูกขีดฆ่า

2) เทียบ specificity ของสองฝั่ง

3) ทำให้ selector ของคุณเฉพาะพอ (เพิ่ม class / จำกัดขอบเขต) หรือลดความแรงของกฎที่ไม่ต้องการ

4) จัดลำดับในไฟล์ให้ส่วน override อยู่หลังส่วนฐานถ้าคะแนนเท่ากัน

5) ลดการใช้ id ใน CSS ถ้าไม่จำเป็น — class จัดการง่ายกว่าในระยะยาว

เป้าหมายคือ CSS ที่อ่านแล้วเดาผลได้ — ไม่ใช่สงคราม !important

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

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

สร้างสองกฎที่ทับกัน แล้วทำให้กฎที่ต้องการชนะโดยปรับ selector ไม่ใช้ !important
ปานกลาง