CSS specificity (độ ưu tiên) tính thế nào?

Khi nhiều rule cùng nhắm một phần tử, trình duyệt chọn rule có specificity cao nhất. Tính theo bộ ba (A, B, C):

• A — số ID selector (#id).
• B — số class, attribute, pseudo-class (.x, [type], :hover).
• C — số element và pseudo-element (div, ::before).

So sánh lần lượt A → B → C, bên nào lớn hơn thắng. Ngoài thang này:

• Inline style (style="…") mạnh hơn mọi selector trong stylesheet.
• !important đè lên tất cả (trừ một !important khác cùng cấp) — nên tránh, dấu hiệu CSS khó bảo trì.
• Cùng specificity → rule viết sau thắng (thứ tự xuất hiện trong code).
• Universal *, :where() có specificity 0.

Nên giữ specificity thấp và đều (ưu tiên class), tránh lồng ID và !important.