Lớp giả này trong CSS khớp với phần tử gốc của tài liệu. Nó chọn cha cấp cao nhất trong cây tài liệu hoặc DOM
Trong HTML, phần tử luôn là phần tử gốc. Mặc dù. root tương đương với bộ chọn html vì cả hai đều nhắm mục tiêu cùng một phần tử, nhưng. bộ chọn gốc có độ đặc hiệu cao hơn
cú pháp
Ví dụ
Kiểm tra nó ngay bây giờBây giờ, hãy thử bộ chọn html và. bộ chọn gốc đồng thời. Mặc dù cả hai đều hoạt động tương tự nhưng về vấn đề cụ thể,. bộ chọn gốc thắng
Ví dụ
Trong ví dụ này, chúng ta sẽ định nghĩa các thuộc tính giống nhau trong bộ chọn html cũng như trong. bộ chọn gốc. Các thuộc tính trong. bộ chọn gốc sẽ hoạt động vì tính đặc hiệu cao hơn. Nhưng những thuộc tính không có trong. bộ chọn gốc nhưng được đề cập trong bộ chọn html, thì các thuộc tính của bộ chọn html sẽ hoạt động
Ví dụ
Kiểm tra nó ngay bây giờTrong ví dụ trên, chúng ta có thể thấy rằng các thuộc tính màu nền và màu sắc đều được đề cập trong html cũng như trong. bộ chọn gốc, nhưng ở đầu ra, các thuộc tính được đề cập trong. bộ chọn gốc sẽ hoạt động. Điều này là do tính đặc hiệu cao hơn của. bộ chọn gốc
Các. lớp giả gốc đại diện cho một phần tử là gốc của tài liệu. Trong HTML, đây luôn là phần tử HTML
cú pháp
selector:root{ properties }
Ví dụ
[Phong cách. css]
:root{ background-color: #ccc; }
[mục lục. html]
This is a paragraph.
CSS định nghĩa. lớp giả gốc trong
Lớp giả CSS :root
khớp với phần tử gốc của cây đại diện cho tài liệu. Trong HTML, :root
đại diện cho phần tử
:root{ background-color: #ccc; }1 và giống hệt với bộ chọn
:root{ background-color: #ccc; }2, ngoại trừ tính đặc hiệu của nó cao hơn
/* Selects the root element of the document:
in the case of HTML */
:root {
background: yellow;
}
:root
:root
có thể hữu ích để khai báo các biến CSS toàn cầu
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu
:root{ background-color: #ccc; }
1:root{ background-color: #ccc; }
5:root
0:root
1:root
2
Tìm thấy một vấn đề với trang này?
- Chỉnh sửa trên GitHub
- Nguồn trên GitHub
- Báo cáo sự cố với nội dung này trên GitHub
- Bạn muốn tự khắc phục sự cố?
Sửa đổi lần cuối. Ngày 29 tháng 12 năm 2022, bởi những người đóng góp MDN
Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể tạo các biến có phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện
Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn. Thay vì sao chép và dán nhiều lần các màu giống nhau, bạn có thể đặt chúng vào các biến
cách truyền thống
Ví dụ sau đây cho thấy cách truyền thống để xác định một số màu trong biểu định kiểu [bằng cách xác định màu sẽ sử dụng cho từng thành phần cụ thể]
Ví dụ
cơ thể {màu nền. #1e90ff;
h2 { đường viền dưới. 2px rắn #1e90ff;
.container {
màu. #1e90ff;
màu nền. #ffffff;
phần đệm. 15px;
}
nút {
màu nền. #ffffff;
màu. #1e90ff;
viền. 1px solid #1e90ff;
phần đệm. 5px;
}
Cú pháp của hàm var[]
Hàm
:root{ background-color: #ccc; }6 dùng để chèn giá trị của biến CSS
Cú pháp của hàm
:root{ background-color: #ccc; }6 như sauGiá trịTên mô tảBắt buộc. Tên biến [phải bắt đầu bằng hai dấu gạch ngang]giá trịTùy chọn. Giá trị dự phòng [được sử dụng nếu không tìm thấy biến]
Ghi chú. Tên biến phải bắt đầu bằng hai dấu gạch ngang [--] và phân biệt chữ hoa chữ thường
Cách hoạt động của var[]
Đầu tiên. Các biến CSS có thể có phạm vi toàn cầu hoặc cục bộ
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
Để tạo một biến có phạm vi toàn cầu, hãy khai báo nó bên trong bộ chọn :root
. Bộ chọn
:root{ background-color: #ccc; }9 khớp với phần tử gốc của tài liệu
Để tạo một biến có phạm vi cục bộ, hãy khai báo nó bên trong bộ chọn sẽ sử dụng nó
Ví dụ sau tương tự như ví dụ trên, nhưng ở đây chúng ta sử dụng hàm
:root{ background-color: #ccc; }6
Đầu tiên, chúng ta khai báo hai biến toàn cục [--blue và --white]. Sau đó, chúng tôi sử dụng hàm
:root{ background-color: #ccc; }6 để chèn giá trị của các biến sau này vào biểu định kiểu
Ví dụ
:root {
--blue. #1e90ff;
--white. #ffffff;
}
cơ thể {màu nền. var[--blue];
h2 { đường viền dưới. 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;
}
Ưu điểm của việc sử dụng var[] là
- làm cho mã dễ đọc hơn [dễ hiểu hơn]
- làm cho việc thay đổi các giá trị màu dễ dàng hơn nhiều
Để thay đổi màu trắng xanh thành trắng xanh dịu hơn, bạn chỉ cần thay đổi hai giá trị biến
Ví dụ
:root {
--blue. #6495ed;
--white. #faf0e6;
}
cơ thể {màu nền. var[--blue];
h2 { đường viền dưới. 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;
}
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
:root{ background-color: #ccc; }6