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
Thí 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 tôi 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
Thí 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
Thí 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[]
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ụ
Thí 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 đè quy tắc !important là đưa một quy tắc !important khác vào một khai báo có cùng mức độ đặc hiệu [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
Thí 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
Thí 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
Thí 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 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ể điều gì xảy ra, 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