Quy tắc CSS The! Important
Cái gì quan trọng?
Quy !importanttắc trong CSS được sử dụng để thêm mức độ quan trọng cho thuộc tính / giá trị hơn mức bình thường.
Trên thực tế, nếu bạn sử dụng !importantquy tắc, 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ụ:
Thí 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 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 !importanttắc ghi đè thuộc
background-colortính trong cả hai trường hợp.
Giới thiệu quan trọng! Quan trọng
Cách duy nhất để ghi đè một !important
quy tắc là đưa !important
quy tắc khác vào một khai báo có cùng độ cụ thể (hoặc cao hơn) trong mã nguồn - và ở đây vấn đề bắt đầu! Đ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 style sheet 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:
Thí dụ
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Mẹo: Nếu biết về !important
quy tắc này thì rất tốt, bạn có thể thấy quy tắc này trong một số mã nguồn CSS. Tuy nhiên, không sử dụng nó trừ khi bạn hoàn toàn phải làm như vậy.
Có thể một hoặc hai cách sử dụng hợp lý! Quan trọng
Một cách để sử dụng !importantlà nếu bạn phải ghi đè một kiểu mà 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 !importantlà: 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ố phần đệm và đường viền:
Thí dụ
.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 phần tử khác có độ đặc hiệu 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:
Thí 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 có giao diện giống nhau, bất kể thế nào, chúng ta có thể thêm !important
quy tắc vào các thuộc tính của nút, như sau:
Thí dụ
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}