Cách sử dụng CSS: root Pseudo-Class Selector

Tìm hiểu về CSS :root pseudo-class selector và cách bạn có thể cần sử dụng nó trong các dự án của bạn !

Bộ chọn CSS :root pseudo-class được sử dụng để chọn cha cấp cao nhất của một đặc tả nhất định. Trong đặc tả HTML :root về cơ bản tương đương với bộ chọn html .

Trong đoạn mã CSS bên dưới, kiểu :root và html sẽ làm điều tương tự:

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

Nếu bạn nhận thấy, tôi đã nói :root về cơ bản tương đương với bộ chọn html . Trên thực tế, bộ chọn :root có nhiều quyền hơn html . Điều này là do nó thực sự được coi là một bộ chọn lớp giả (như :first-child hoặc :hover ).

Là một bộ chọn lớp giả, nó có nhiều quyền hạn hơn / độ đặc hiệu cao hơn các bộ chọn thẻ:

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

Mặc dù bộ chọn html ra đời sau, bộ chọn :root vẫn chiến thắng, nhờ tính đặc hiệu cao hơn của nó!

Đặc điểm kỹ thuật chéo

Trong đặc tả HTML, lớp giả :root nhắm đến đến lớp cha cấp cao nhất: html .

Vì CSS cũng được thiết kế cho SVG và XML nên bạn có thể sử dụng :root và nó sẽ chỉ tương ứng với một phần tử khác.

Ví dụ: trong SVG, cấp cao nhất chính là thẻ svg .

:root {
  fill: gold;
}

svg {
  fill: gold;
}

Tương tự như HTML, các thẻ :root và svg chọn cùng một phần tử, tuy nhiên :root selector sẽ có độ đặc hiệu cao hơn.

Sử dụng thực tế

Các ứng dụng thực tế cho :root gì? Như ta đã đề cập trước đó, nó là một sự thay thế an toàn cho bộ chọn html .

Điều này nghĩa là bạn có thể làm bất cứ điều gì bạn thường làm với công cụ chọn html :

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

Nếu muốn, bạn có thể cấu trúc lại mã này để sử dụng Thuộc tính tùy chỉnh CSS để tạo các biến ở cấp độ global !

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

Lợi ích bổ sung của việc sử dụng :root thay vì html là bạn có thể tạo kiểu đồ họa SVG của bạn ! 🤯

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

svg {
  font-family: var(--body-fonts);
}

svg circle {
  fill: var(--primary-color);
}

Để có tài liệu mở rộng về :root bộ chọn lớp giả :root , hãy truy cập Mạng nhà phát triển Mozilla

Tags:

Các tin liên quan

Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22