Cách sử dụng !important trong CSS

Giải thích về !important?

trong CSS !important quy tắc để tăng priority cho thuộc tính/giá trị cao hơn so với phong cách thông thường.

thực tế, nếu bạn sử dụng !important quy tắc, nó sẽ che盖 trên thuộc tính cụ thể của phần tử đó tất cả các quy tắc phong cách trước đó!

hãy xem một ví dụ:

Mẫu

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Thử ngay

mô tả ví dụ

trong ví dụ trên, tất cả ba đoạn văn sẽ có màu nền đỏ, mặc dù ID chọn器和 chọn器 lớp có tính đặc trưng cao hơn.!important quy tắc che盖 cả hai thuộc tính background-color trong hai trường hợp này.

Về quan trọng của !important

che盖 !important quy tắc duy nhất để che盖 là bao gồm một tuyên bố có tính đặc trưng tương tự (hoặc cao hơn) trong mã nguồn. !important quy tắc - đây là bắt đầu của vấn đề! Điều này sẽ làm cho mã nguồn CSS trở nên hỗn loạn và việc gỡ lỗi cũng trở nên khó khăn, đặc biệt là khi bạn có bảng phong cách lớn!

ở đây chúng ta tạo ra một ví dụ đơn giản. Khi bạn xem mã nguồn CSS, bạn không thực sự rõ哪种 màu được coi là quan trọng nhất:

Mẫu

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Thử ngay

lưu ý:hiểu !important quy tắc là tốt. Bạn có thể thấy nó trong một số mã nguồn CSS. Nhưng, trừ khi bạn thực sự cần phải sử dụng nó, đừng sử dụng nó.

có thể có một hai trường hợp sử dụng hợp lý của !important.

một cách sử dụng !important trường hợp là, nếu bạn phải che盖 không thể che盖 bằng cách nào khác. Điều này có thể là vì bạn đang sử dụng 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ể thiết lập một số phong cách tùy chỉnh để che盖 một số phong cách CMS.

một cách sử dụng !important trường hợp là: giả sử bạn muốn tất cả các nút trên trang web đều có ngoại hình đặc biệt. Ở đây, phong cách của nút là màu nền xám, văn bản trắng và một số khoảng cách nội bộ và viền:

Mẫu

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Thử ngay

Nếu chúng ta đặt nút vào một phần tử khác có tính đặc trưng cao hơn, thì ngoại hình của nút có thể thay đổi và các thuộc tính có thể xung đột. Dưới đây là một ví dụ:

Mẫu

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Thử ngay

Để “ép” tất cả các nút có cùng外观 bất kể thời điểm nào, chúng ta có thể đặt !important Thêm các quy tắc vào thuộc tính của nút, như sau:

Mẫu

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Thử ngay