Kiểu ghi đè CSS

Trên thực tế, nếu bạn sử dụng quy tắc !important, quy tắc này 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 {
  màu nền. xanh da trời;
}

.myclass {
  màu nền. màu xám;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

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 ghi đè thuộc tính background-color trong cả hai trường hợp

quan trọng về. quan trọng

Cách duy nhất để ghi đè một quy tắc !important là đưa một quy tắc !important khác vào một khai báo có cùng đặc điểm (hoặc cao hơn) trong mã nguồn - và vấn đề bắt đầu từ đâ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 biểu đị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 xem mã nguồn CSS, màu nào được coi là quan trọng nhất

Ví dụ

#myid {
  màu nền. màu xanh da trời. quan trọng;
}

.myclass {
  màu nền. xám. quan trọng;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

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, không sử dụng nó trừ khi bạn thực sự phải

Có thể một hoặc hai trường hợp sử dụng hợp lý. quan trọng

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 đè lên 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 và một số phần đệm và đường viền

Ví dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

Tự mình thử »

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 sẽ xung đột. Đây là một ví dụ về điều này

Ví dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

#myDiv a {
  color. màu đỏ;
  màu nền. màu vàng;
}

Tự mình thử »

Để "buộc" tất cả các nút có giao diện giống nhau, bất kể là gì, chúng ta có thể thêm quy tắc !important vào các thuộc tính của nút, như thế này

Từ trang trước, chúng ta đã biết rằng các biến toàn cục có thể được truy cập/sử dụng trong toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo

Nhìn vào ví dụ từ trang trước

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  màu nền. var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệm. 5px;
}

Đôi khi chúng tôi muốn các biến chỉ thay đổi trong một phần cụ thể của trang

Giả sử chúng ta muốn có một màu xanh lam khác cho các phần tử nút. Sau đó, chúng ta có thể khai báo lại biến --blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(--blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến cục bộ --blue được khai báo tại đây

Chúng ta thấy rằng biến --blue cục bộ sẽ ghi đè biến --blue toàn cầu cho các phần tử nút

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  --blue. #0000ff; . var(--white);
  background-color: var(--white);
  màu. var(--blue);
  viền. 1px solid var(--blue);
  phần đệm. 5px;
}

Thêm một biến cục bộ mới

Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể khai báo một biến cục bộ mới, như thế này

Ví dụ

:root {
  --blue. #1e90ff;
  --white. #ffffff;
}

body {
  màu nền. var(--blue);
}

h2 {
  đường viền dưới cùng. 2px solid var(--blue);
}

.container {
  màu. var(--blue);
  màu nền. var(--white);
  phần đệm. 15px;
}

nút {
  --button-blue. #0000ff; . var(--white);
  background-color: var(--white);
  màu. var(--button-blue);
  viền. 1px solid var(--button-blue);
  đệm. 5px;
}

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var()

CSS có ghi đè kiểu HTML không?

Làm cách nào để ghi đè kiểu nội tuyến bằng CSS?

Làm cách nào để ghi đè CSS chủ đề?