: root - Thủ thuật CSS | CSS Almanac 2025

Bộ :rootchọn cho phép bạn nhắm mục tiêu phần tử “cha” 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 CSS Selectors Level 3 là “lớp giả cấu trúc”, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên mối quan hệ của nó với nội dung chính và anh chị em.

Trong phần lớn các trường hợp bạn có thể gặp phải, hãy :rootđề cập đến phần tử trong một trang web. Trong tài liệu HTML, htmlphần tử sẽ luôn là phần tử cấp cao nhất, do đó, hành vi của :rootcó thể dự đoán được. Tuy nhiên, vì CSS là một 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, lớp :rootgiả 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ì, :rootsẽ luôn chọn phần tử cao nhất của tài liệu trong cây tài liệu.

Trong ví dụ bên dưới, :rootbộ chọn lớp giả được sử dụng để tạo màu nền đằng sau phần tử. Trong trường hợp này, bạn có thể đạt được hiệu ứng tương tự bằng cách sử dụng htmlbộ chọn phần tử trong CSS của chúng tôi.

Kiểm tra cây bút này!

Điểm quan tâm

Mặc dù :rootbộ chọn và htmlbộ chọn đều nhắm mục tiêu các phần tử HTML giống nhau, nhưng có thể hữu ích khi biết rằng bộ chọn :rootthực sự có độ cụ thể cao hơn. Bộ chọn lớp giả (nhưng không phải phần tử giả) có tính đặc hiệu ngang bằng với một lớp, cao hơn bộ chọn phần tử cơ bản.