1. Kiến thức trọng tâm
Khi nhiều quy tắc CSS cùng áp dụng cho một phần tử, trình duyệt phải quyết định quy tắc nào thắng. Quyết định này dựa trên ba yếu tố theo thứ tự: nguồn gốc và mức độ quan trọng, độ đặc hiệu (specificity) và thứ tự xuất hiện. Về nguồn gốc, khai báo có !important thắng khai báo thường; CSS nội tuyến trong thuộc tính style thắng CSS trong tệp. Về độ đặc hiệu, bộ chọn id (#ten) mạnh hơn bộ chọn lớp (.ten), bộ chọn lớp mạnh hơn bộ chọn thẻ (p, h1). Nếu hai quy tắc có độ đặc hiệu bằng nhau, quy tắc viết sau sẽ thắng. Hiểu mức ưu tiên giúp tránh lỗi khó hiểu khi định dạng không như mong muốn: ví dụ một đoạn văn vẫn giữ màu cũ vì quy tắc cũ dùng id mạnh hơn quy tắc mới dùng lớp. Nguyên tắc tốt là hạn chế dùng !important và bộ chọn id, ưu tiên bộ chọn lớp để CSS dễ bảo trì và dễ dự đoán.
2. Ví dụ minh họa
Yêu cầu: xác định màu chữ cuối cùng của đoạn văn <p id="mo-dau" class="noi-bat">Xin chào</p> với các quy tắc sau:
p { color: black; }
.noi-bat { color: blue; }
#mo-dau { color: red; }
Lời giải: đoạn văn có màu đỏ. Giải thích: cả ba quy tắc đều áp dụng cho cùng một phần tử, nhưng độ đặc hiệu khác nhau: bộ chọn thẻ p yếu nhất, bộ chọn lớp .noi-bat mạnh hơn, bộ chọn id #mo-dau mạnh nhất nên thắng. Nếu xóa quy tắc id, đoạn văn sẽ có màu xanh dương theo bộ chọn lớp; nếu chỉ còn quy tắc thẻ, đoạn văn có màu đen.
3. Ghi nhớ
- Khi xung đột, trình duyệt xét:
!important, nguồn gốc, độ đặc hiệu, thứ tự xuất hiện. - Độ đặc hiệu: id (
#) mạnh hơn lớp (.), lớp mạnh hơn thẻ. - Quy tắc viết sau thắng khi độ đặc hiệu bằng nhau.
- Hạn chế dùng
!importantvà bộ chọn id; ưu tiên bộ chọn lớp để CSS dễ bảo trì.