!important là gì?
!important trong CSS được sử dụng để thêm độ ưu tiên cho thuộc tính hơn bình thường.
Trên thực tế, nếu bạn sử dụng quy tắc !important, nó sẽ ghi đè TẤT CẢ các quy tắc tạo kiểu trước đó cho thuộc tính cụ thể trên element đó!
Chúng ta hãy xem xét một ví dụ:
#myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; }Giải thích ví dụ
Trong ví dụ trên. cả ba đoạn văn sẽ có màu nền đỏ, mặc dù id selector và class selector có độ ưu tiên cao hơn. !important sẽ ghi đè thuộc tính background-color trong cả hai trường hợp.
Lưu ý khi sử dụng !important
Cách duy nhất để ghi đè !important là sử dụng một !important khác. Tuy nhiên điều này làm cho mã CSS khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một bảng kiểu lớn!
Ở đây chúng tôi đã tạo một ví dụ đơn giản. Không rõ khi bạn nhìn vào code CSS, màu nào được coi là quan trọng nhất:
#myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; }Mẹo: Sẽ rất tốt nếu bạn biết về !important. Bạn có thể thấy nó trong một số code CSS. Tuy nhiên, không sử dụng nó trừ khi bạn bắt buộc phải làm như vậy.
Hai cách sử dụng hợp lí !important
Một cách để sử dụng !important là nếu bạn phải ghi đè một thuộc tính không thể được ghi đè theo bất kỳ cách nào khác. Điều này có thể là nếu bạn đang làm việc trên một hệ thống quản lý nội dung (CMS) và không thể chỉnh sửa mã CSS. Sau đó, bạn có thể đặt một số tùy chỉnh để ghi đè.
Một cách khác nữa để sử dụng !important là: Giả sử bạn muốn có giao diện đặc biệt cho tất cả các nút trên một trang. Ở đây, các nút được tạo kiểu với màu nền xám, văn bản màu trắng và một số padding và margin:
.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; }
Giao diện của một nút đôi khi có thể thay đổi nếu chúng ta đặt nó bên trong một element khác có độ ưu tiên cao hơn và các thuộc tính xung đột với nhau. Đây là một ví dụ về điều này.
.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; }
Để "buộc" tất cả các nút có giao diện giống nhau, bất kể thế nào, chúng ta có thể thêm quy tắc !important vào các thuộc tính của nút, như sau:
.button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; }