Khai báo sau quyết định khi các mức ưu tiên trước đó bằng nhau
```css
h1 { color: blue; text-align: center; }
h1 { text-align: left; }
```
Các ví dụ ở bài này xét quy tắc trong cùng nguồn CSS của trang, cùng bộ chọn h1 và không có định dạng khác làm thay đổi kết quả. Nếu các khai báo cùng mức ưu tiên, khai báo viết sau cho **cùng thuộc tính** quyết định.
Vì vậy h1 có màu blue và căn trái. Quy tắc sau chỉ đổi text-align; nó không xóa khai báo color ở quy tắc trước.
Đánh dấu một khai báo quan trọng
```css
body { font-family: sans-serif; }
h1 { text-align: center !important; color: blue; }
h1 { text-align: left; color: red; }
* { font-family: serif; }
```
!important viết sau giá trị và trước dấu chấm phẩy. Trong mẫu, text-align:center !important được ưu tiên so với text-align:left thông thường. h1 vẫn căn giữa dù khai báo left viết sau.
color không có !important ở cả hai quy tắc h1 nên khai báo color:red viết sau quyết định. Dấu quan trọng trên text-align không tự lan sang color hoặc mọi thuộc tính của h1. Phông h1 và p dùng serif trong mẫu vì có khai báo trực tiếp từ *.
Đọc theo từng thuộc tính và đúng điều kiện
Có thể ghi riêng kết quả: căn dòng, màu chữ, phông chữ. Một quy tắc thắng về căn dòng không chứng minh nó thắng về mọi định dạng khác.
Quy tắc “viết sau” dùng sau khi đã xét các mức ưu tiên liên quan. Với những bộ chọn hoặc nguồn CSS khác nhau, cần xét thêm điều kiện; không dùng ví dụ hai h1 ở đây để kết luận mọi khai báo viết cuối đều thắng. Khi dùng !important, xác định rõ khai báo nào cần nó và thử lại kết quả.
Bài luyện
Hai quy tắc đầu bài: h1 đặt color blue và căn giữa, sau đó h1 chỉ đặt căn trái; không có CSS khác. Kết quả là gì?
Đúng. Chỉ text-align được khai báo sau thay thế.
Quy tắc sau không xóa color.
text-align:left viết sau cùng mức nên có hiệu lực.
Các khai báo được xét theo thuộc tính.
Lời giải
Cả hai cùng đặt text-align cho h1 ở cùng mức, nên left viết sau quyết định. Quy tắc sau không có color; màu blue từ khai báo trước vẫn được giữ trong ví dụ.
Bài luyện
Trong ví dụ có !important, h1 cuối cùng căn giữa hay căn trái?
Ở đây mức quan trọng khác nhau.
Hai quy tắc xung đột vẫn có cách xác định giá trị.
Đúng. Xét mức quan trọng trước thứ tự trong mẫu.
Độ dài mười kí tự không xác định ưu tiên khai báo.
Lời giải
text-align:center được đánh dấu !important. Trong điều kiện mẫu, nó ưu tiên hơn text-align:left thông thường nên h1 căn giữa; không áp dụng máy móc quy tắc viết sau.
Bài luyện
Trong cùng ví dụ có !important, vì sao h1 có chữ đỏ dù text-align:center có !important?
Dấu quan trọng không tự chọn màu đỏ.
Đúng. Cần xét từng thuộc tính.
Quy tắc * ở mẫu chỉ đặt font-family.
blue là giá trị màu hợp lệ.
Lời giải
Dấu !important thuộc khai báo text-align, không tự áp dụng cho color. Hai khai báo color của h1 đều thông thường, cùng mức; red viết sau nên quyết định màu.
Đang học