Importantđược sử dụng để thay đổi thứ tự ưu tiên của CSS, khi một quy luật nào đó được gán important thì nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó có khai báo CSS cục bộ hay CSS nội tuyến. Các bạn có thể xem lại trong bài CSS là gì? để hiểu về thứ tự ưu tiên trong CSS.
Xét ví dụ sau:
Giả sử ta có thành phần p được khai báo CSS cục bộ như sau:
<p class="first" style="color: red">Đoạn văn bản bị ảnh hưởng bởi các quy luật của CSS</p>
Và bạn khai báo CSS ngoại tuyến như sau:
p.first{ color: green }
Thì đoạn văn bản trên luôn luôn được hiển thị với màu đỏ bởi vì được khai báo CSS cục bộ.
Sử dụng important để thay đổi thứ tự ưu tiên trong CSS
Vậy có cách nào để đoạn văn bản trên được hiển thị với màu xanh mà không phải chỉnh sửa CSS cục bộ, đó là lúc bạn cần sử dụng đến important.
Chỉnh sửa lại đoạn mã trong CSS ngoại tuyến lại như sau:
p.first{ color: green !important }
Kết quả là đoạn văn bản trên được hiển thị với màu xanh trong khi CSS cục bộ vẫn được khai báo là style=”color: red”
Như vậy khi thêm vào !important phía sau một quy luật CSS, chúng ta có thể dễ dàng thay đổi thứ tự ưu tiên trong CSS.
Important không chỉ thay đổi thứ tự ưu tiên giữa CSS cục bộ, CSS nội tuyến, CSS ngoại tuyến, mà còn thay đổi thứ tự ưu tiên ngay trong file CSS
Giả sử khi ta khai báo CSS như sau:
p.second{ color: blue }
p.second{ color: red }
Thì quy luật được khai báo sau sẽ được ưu tiên hơn quy luật khai báo trước, như ví dụ trên thì đoạn văn bản p.second sẽ được hiển thị với màu đỏ. Nhưng bạn vẫn có thể định dạng đoạn văn bản hiển thị với màu xanh bằng việc thêm !important sau quy luật thứ nhất
p.second{ color: blue !important }
p.second{ color: red }
Trường hợp này xảy ra khi trong ứng dụng của bạn có nhiều file .css dẫn đến tình trạng khó kiểm xoát, và khi đó bạn cần sử dụng đến !important để quyết định quy luật nào sẽ được hiển thị.
Lời khuyên cho bạn:
Nên gộp chung tất các các file .css thành một file duy nhất để tiện quản lý và dễ tối ưu.