CSS Quy tắc quan trọng
Cái gì quan trọng?
Quy tắc !important trong CSS được sử dụng để tăng thêm tầm quan trọng cho một thuộc tính/giá trị 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 phần tử đó!
Chúng ta hãy xem xét một ví dụ:
Ví dụ
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}Ví dụ giải thích
Trong ví dụ trên. cả ba đoạn văn sẽ có màu nền đỏ, mặc dù bộ chọn ID và bộ chọn lớp có độ đặc hiệu cao hơn. Quy tắc !important sẽ ghi đè thuộc tính background-color trong cả hai trường hợp.
Quan trọng về !important
Cách duy nhất để ghi đè quy tắc !important là đưa quy tắc !important vào khai báo có cùng độ đặc hiệu (hoặc cao hơn) trong mã nguồn - và vấn đề bắt đầu ở đây! Điều này làm cho mã CSS trở nên 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 định kiểu lớn!
Ở đây chúng tôi đã tạo một ví dụ đơn giản. Không rõ lắm, khi bạn nhìn vào mã nguồn CSS, màu nào được coi là quan trọng nhất:
Ví dụ
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
} Mẹo: Thật tốt khi biết về quy tắc !important . Bạn có thể thấy nó trong một số mã nguồn CSS. Tuy nhiên, đừng sử dụng nó trừ khi bạn thực sự phải làm vậy.
Có thể một hoặc hai cách sử dụng hợp lý của !important
Một cách để sử dụng !important là nếu bạn phải ghi đè một kiểu không thể ghi đè theo bất kỳ cách nào khác. Điều này có thể xảy ra nếu bạn đang làm việc trên 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ố kiểu tùy chỉnh để ghi đè một số kiểu CMS.
Một cách khác để 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 cùng một số phần đệm và đường viền:
Ví dụ
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}Hình thức của một nút đôi khi có thể thay đổi nếu chúng ta đặt nó bên trong một phần tử khác có độ đặc hiệu cao hơn và các thuộc tính sẽ xung đột với nhau. Đây là một ví dụ về điều này:
Ví dụ
.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 phải có giao diện giống nhau, dù thế nào đi nữa, 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:
Ví dụ
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}