CSS có hai cách để nhắm mục tiêu phần tử gốc của tài liệu HTML - lớp giả :root và bộ chọn html. Mặc dù những thứ này rất giống nhau, nhưng chúng có một vài điểm khác biệt mà bạn nên biết

tính đặc hiệu của bộ chọn

Bộ chọn :root có độ đặc hiệu cao hơn bộ chọn html. Điều này là do :root là bộ chọn lớp giả, trong khi html là bộ chọn loại

Nhắm mục tiêu phần tử gốc

CSS có thể được sử dụng để tạo kiểu cho các loại tài liệu khác, ngoài HTML. Đây là lúc phần tử :root phát huy tác dụng, cho phép bạn tạo kiểu cho phần tử gốc của tài liệu. Điều này có thể đặc biệt quan trọng khi tạo kiểu tài liệu SVG, trong đó bộ chọn html sẽ không hoạt động

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

Thí dụ

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

Thí 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

Thí dụ

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

CSS root is a selector that is said to be the topmost element of the web page within the HTML. This element is available within the “structural pseudo-class” library, we can use this for style the topmost parent content from the child content. In CSS, the root element is playing a crucial role in selecting HTML elements. The selector is mainly used for refer element of any web page. In an, any HTML document file HTML element will always the highest level parent. This makes us predict the behavior of the root element easily. CSS is a page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo-class can refer to different elements in such cases. So we can conclude that the root element always the topmost element of the HTML page. Real-Time Scenario: When we want to style the entire page into different background colors and middle portion of div tags with different colors then we go for root selector.

Ghi chú. Nếu chúng ta áp dụng bất kỳ cài đặt nào cho thẻ “body” hoặc thẻ “root” thì cả hai sẽ dẫn đến root nằm trên thẻ body

cú pháp

Bộ chọn gốc này được sử dụng để thực hiện các kiểu CSS cấp gốc như màu nền

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (83.083 xếp hạng)

:root {
//CSS styles
}

Ví dụ để triển khai gốc CSS

Dưới đây là một số ví dụ được đề cập

Ví dụ 1

Mã số

Introduction to root selector
 CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element.  The CSS :root selector is mainly used for refer  element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.

đầu ra

Giải trình. Như bạn có thể thấy bộ chọn gốc áp dụng các kiểu cho phần tử trên cùng của HTML. Phần tử nội dung áp dụng các kiểu CSS cho ngay bên dưới phần của bộ chọn gốc

Ví dụ #2

Mã số

Introduction to root selector
 CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. .  The CSS :root selector is mainly used for refer  element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.

đầu ra

Giải trình. Như bạn có thể thấy trong hình gốc ở trên, màu nền ban đầu là màu đỏ và khi chúng ta di chuột vào vùng màu đỏ thì màu đỏ chuyển sang màu xanh cho đến 0. 6 giây ngược lại. Phần tử nội dung áp dụng các kiểu CSS cho ngay bên dưới phần của bộ chọn gốc

Ví dụ #3

Mã số

Introduction to root selector
 CSS root is a selector which is said to be top most element of the web page within the HTML. This CSS root element is available within the “structural pseudo class” library, we can use this for style the top most parent content from the child content. In CSS the root element is really play crucial role for selecting HTML element. .  The CSS :root selector is mainly used for refer  element of any web page. In an any HTML document file HTML element will always the highest level parent. Which makes us to predict the behavior of root element easily. As CSS is page styling language that can be used for other document formats also, for example XML and SVG. The root selector pseudo class can refer to different elements in such cases. So we can conclude that root element always the top most element of the HTML page.

đầu ra

Giải trình. Như bạn có thể thấy, chúng ta có thể thấy văn bản riêng biệt trong bộ chọn gốc và vùng nội dung. Điều này có thể kết luận chúng tôi root là phần tử trên cùng trong HTML

Sự kết luận

Root trong CSS là một bộ chọn được sử dụng để chọn vùng trên cùng của phần tử HTML. Chúng tôi có thể áp dụng các kiểu cần thiết của người dùng cho khu vực bộ chọn gốc này

Bài viết được đề xuất

Đây là hướng dẫn về root CSS. Ở đây chúng tôi thảo luận về phần giới thiệu về gốc CSS, nó làm gì, cú pháp, ví dụ với đầu ra mã và giải thích. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

Gốc trong CSS là gì?

Gốc trong HTML là gì?

Bạn có thể có nhiều CSS gốc không?

Root trong CSS w3schools là gì?