Bạn sẽ theo dõi một đoạn thông báo có nhiều quy tắc màu cùng khớp, xác định quy tắc thắng và sửa đúng phạm vi. Bài này giúp tránh thói quen thêm !important mỗi khi giao diện chưa đổi.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Nhiều quy tắc có thể cùng áp dụng

Một phần tử có thể khớp selector kiểu p, class notice và tổ hợp .notice.is-important. Trình duyệt phải giải quyết xung đột theo cascade. Đây không chỉ là câu “dòng viết sau thắng”. Trước hết còn phải xét nguồn, mức quan trọng và các cơ chế như cascade layers khi có sử dụng.

Trong ví dụ của bài, ta giới hạn ở các khai báo thường, cùng nguồn tác giả, cùng lớp và không có inline style. Trong phạm vi đó, specificity rồi thứ tự nguồn giúp giải thích kết quả. Không áp dụng quy tắc rút gọn này cho mọi stylesheet phức tạp.

Hiểu specificity bằng ví dụ nhỏ

ID có trọng số khác class; class, thuộc tính và pseudo-class được tính khác với kiểu phần tử. Không nên cộng thành một số thập phân tùy ý vì các cột không chuyển nhớ như phép cộng bình thường. Selector .notice.is-important có hai class nên thắng .notice trong điều kiện của ví dụ, dù một quy tắc .notice khác xuất hiện sau.

Các selector như :where() và :is() có quy tắc riêng; bạn chưa cần dùng chúng để giải quyết bài nhập môn. Điều cần làm trước là xem selector thực tế, không đoán trọng số theo độ dài của cả dòng.

Kế thừa và giá trị áp dụng trực tiếp

Màu chữ và font thường kế thừa, trong khi margin, padding không mặc nhiên kế thừa. Một khai báo khớp trực tiếp phần tử có thể quyết định giá trị thay vì màu kế thừa từ cha. Nếu a vẫn có màu mặc định dù cha đổi màu, hãy xem quy tắc áp dụng cho a.

inherit, initial và unset có các ý nghĩa khác nhau. inherit lấy từ cha; initial đưa về giá trị khởi đầu theo định nghĩa thuộc tính; unset chọn hành vi kế thừa hoặc khởi đầu tùy thuộc tính. Không dùng chúng như các từ khóa “xóa CSS” giống nhau.

Cách tìm nguyên nhân trong DevTools

Chọn đúng phần tử, nhìn khai báo bị gạch trong Styles và giá trị cuối ở Computed. Kiểm tra CSS có tải, selector có khớp, thuộc tính có hỗ trợ và cú pháp có hợp lệ. Chỉ khi đã hiểu xung đột mới quyết định giảm độ đặc hiệu, đổi cấu trúc quy tắc hoặc đổi thứ tự.

!important có vai trò thật nhưng không phải công cụ chữa mọi vấn đề. Nếu mỗi thành phần dùng thêm !important để thắng thành phần trước, bạn sẽ khó dự đoán lần sửa sau. Tổ chức quy tắc ngắn và rõ phạm vi thường hữu ích hơn.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<p class="notice is-important">Thông báo quan trọng: hãy kiểm tra bản sao trước khi sửa.</p>

Thêm hoặc sửa trong styles.css

.notice { color: #1d4ed8; }
.notice.is-important { color: #9f1239; }
/* Dòng sau vẫn không thắng selector có hai class ở trên. */
.notice { color: #166534; }

So sánh trước và sau

Bản sau hiển thị thông báo màu đỏ sẫm theo selector có hai class. Việc một quy tắc màu xanh nằm sau chưa đủ để thắng trong ví dụ cùng nguồn và cùng lớp này.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Chỉ nhìn dòng cuối trong tệp: xem selector thắng ở Styles.
• Gọi mọi lỗi là cache: kiểm tra tài nguyên và quy tắc cụ thể.
• Thêm !important trước khi biết nguyên nhân: xác định cascade trước.

Tự kiểm tra

• Tạm bỏ class is-important rồi dự đoán màu trước khi tải lại.
• Chọn liên kết và một đoạn văn, so cách chúng nhận màu.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML