CSS gốc so với html

Bộ chọn :root cho phép bạn nhắm mục tiêu phần tử "cha mẹ" cấp cao nhất trong DOM hoặc cây tài liệu. Nó được định nghĩa trong thông số kỹ thuật Cấp 3 của Bộ chọn CSS là "lớp giả cấu trúc", nghĩa là nó được sử dụng để tạo kiểu cho nội dung dựa trên mối quan hệ của nó với nội dung chính và nội dung anh chị em

Trong phần lớn các trường hợp mà bạn có thể gặp phải, :root đề cập đến yếu tố

:root {
  background-color: white;
}
html {
  background-color: black;
}

0 trong trang web. Trong tài liệu HTML, phần tử

:root {
  background-color: white;
}
html {
  background-color: black;
}

1 sẽ luôn là phần tử cấp cao nhất, vì vậy hành vi của phần tử :root có thể dự đoán được. Tuy nhiên, vì CSS là ngôn ngữ tạo kiểu có thể được sử dụng với các định dạng tài liệu khác, chẳng hạn như SVG và XML, nên lớp giả :root có thể tham chiếu đến các phần tử khác nhau trong những trường hợp đó. Bất kể ngôn ngữ đánh dấu là gì, :root sẽ luôn chọn phần tử trên cùng của tài liệu trong cây tài liệu

Trong ví dụ bên dưới, bộ chọn lớp giả :root được sử dụng để tạo màu nền phía sau phần tử

:root {
  background-color: white;
}
html {
  background-color: black;
}

6. Trong trường hợp này, bạn có thể đạt được hiệu quả tương tự bằng cách sử dụng bộ chọn phần tử

:root {
  background-color: white;
}
html {
  background-color: black;
}

1 trong CSS của chúng tôi để thay thế

Thí dụ

Đặt màu nền cho tài liệu HTML

:root {
  nền. #ff0000;
}

Tự mình thử »

---

Định nghĩa và cách sử dụng

Bộ chọn :root khớp với phần tử gốc của tài liệu

Trong HTML, phần tử gốc luôn là phần tử html

---

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 đủ bộ chọn

Bộ chọn. gốc4. 09. 03. 53. 29. 6

---

Cú pháp CSS

:root {
  khai báo css;
} Demo

Bộ chọn :root trong CSS cho phép bạn so khớp phần tử cấp cao nhất trong tài liệu của bạn (hoặc gốc tài liệu). Trong trường hợp của HTML, điều này tương đương với việc sử dụng bộ chọn

:root {
  background-color: white;
}
html {
  background-color: black;
}

1 để chọn phần tử, ngoại trừ bộ chọn :root có tính đặc hiệu cao hơn (:root là bộ chọn lớp giả có tính đặc hiệu bằng với bộ chọn lớp)

CSS không chỉ để tạo kiểu cho tài liệu HTML. Nó có thể được sử dụng với các ngôn ngữ tài liệu khác, chẳng hạn như SVG và XML--lớp giả :root, trong trường hợp này, đề cập đến các phần tử khác nhau

Chúng ta có thể sử dụng bộ chọn lớp giả :root có thể được sử dụng giống như bất kỳ bộ chọn nào khác. Ví dụ

:root {
  background: hsl(0, 100%, 50%);
  color: blue;
}

Điều này sẽ áp dụng các kiểu CSS cho phần tử

Sự khác biệt chính giữa :root và

:root {
  background-color: white;
}
html {
  background-color: black;
}

1 là :root (là bộ chọn lớp giả) có độ đặc hiệu cao hơn so với

:root {
  background-color: white;
}
html {
  background-color: black;
}

1 ( wihc là bộ chọn loại). Hãy xem xét ví dụ nhỏ này

:root {
  background-color: white;
}
html {
  background-color: black;
}

Bộ chọn :root ghi đè bộ chọn

:root {
  background-color: white;
}
html {
  background-color: black;
}

1. Màu của nền sẽ là màu trắng không phải màu đen

Một cách sử dụng hữu ích của bộ chọn :root là để khai báo các biến CSS phạm vi toàn cầu hoặc các thuộc tính tùy chỉnh. Ví dụ

:root { --bg-color: hsl(120, 100%, 50%); }

Thuộc tính tùy chỉnh

:root {
  background-color: white;
}
html {
  background-color: black;
}

7 có sẵn trên phạm vi toàn cầu. Điều đó có nghĩa là giá trị của

:root {
  background-color: white;
}
html {
  background-color: black;
}

7 là

:root {
  background-color: white;
}
html {
  background-color: black;
}

9 có thể được truy cập từ bất kỳ phần tử DOM nào khác. Chúng ta có thể sử dụng hàm

:root { --bg-color: hsl(120, 100%, 50%); }

0 để lấy giá trị

The :root selector targets the highest level parent, which would be the tag in an HTML document. The :root has a higher specificity, as it is a pseudo-class instead of a plain element.

CSS-Tricks có một mô tả tuyệt vời về điều này. . root bởi Sarah Cope

Trong ví dụ này, nền của trang sẽ có màu đỏ, như. root cụ thể hơn html

:root {background:red;}
html {background:green;}

Các. bộ chọn gốc được hỗ trợ trên tất cả các trình duyệt chính

Đăng bởiTed28 tháng 2 năm 2017 18 tháng 4 năm 2017Đăng trongCSS, CSS3, Quick TipsTags: CSS, lớp giả, gốc, bộ chọn

Xuất bản bởi Ted

Khả năng truy cập không chỉ là đảm bảo hình ảnh có văn bản thay thế. Tôi làm việc với các kỹ sư, người quản lý sản phẩm và nhà thiết kế để hiểu khả năng tiếp cận ảnh hưởng đến người dùng như thế nào, đặt ra thời hạn thực tế và tạo ra các giải pháp nhằm mang lại trải nghiệm thú vị cho tất cả người dùng, bất kể khả năng thể chất, giác quan hay nhận thức của họ như thế nào. Xem thêm bài viết

Root và HTML có giống nhau không?

Gốc trong CSS là gì?

Gốc có giống với * trong CSS không?

Root có phải là HTML không?