Một rule viết sau trong file vẫn không đè được rule viết trước. Bạn giải thích thứ tự thắng thua của CSS thế nào?

Trình duyệt chọn giá trị theo thứ tự ba tầng, chỉ khi hoà ở tầng trên mới xét tầng dưới:

1. Nguồn và mức quan trọng — user-agent < author < !important (đảo ngược thứ tự).
2. Độ cụ thể (specificity) — bộ ba (inline, id, class/attribute/pseudo-class, element/pseudo-element).
3. Thứ tự khai báo — cái đứng sau thắng, chỉ khi hai tầng trên bằng nhau.

Cách đếm specificity: mỗi #id cộng vào cột id, mỗi .class / [attr] / :hover cộng vào cột class, mỗi tag / ::before cộng vào cột element. So sánh từ trái sang, cột trái lớn hơn là thắng ngay — 11 class vẫn thua 1 id.

#sidebar .title { color: red; }   /* (1,1,0) */
.page .card .title { color: blue; } /* (0,3,0) -> thua dù viết sau */

Vì vậy rule viết sau không đè được là do rule kia cụ thể hơn.

• Cách sửa đúng: hạ specificity của rule cũ (bỏ bớt #id), hoặc viết selector cùng mức rồi đặt sau — không phải thêm !important.
• Trong DevTools, giá trị bị gạch ngang chính là khai báo thua ở bước này.