:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 là bộ chọn lớp giả CSS được sử dụng để chọn phần tử đại diện cho thư mục gốc của tài liệu

Trong HTML4, đây luôn là phần tử

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

3, vì nó là tổ tiên cấp cao nhất của tất cả các phần tử khác trên trang. Vì vậy,

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 giống hệt với việc sử dụng

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

5 làm bộ chọn, ngoại trừ việc nó có tính đặc hiệu cao hơn

Điều này có nghĩa là, trong ví dụ sau, các kiểu được chỉ định bằng cách sử dụng

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 sẽ ghi đè các kiểu được chỉ định bằng bộ chọn

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

5, ngay cả khi kiểu sau xuất hiện tiếp theo trong biểu định kiểu

:root {
    /* style the root element */
}

html {
    /* style the root element */
}
                

Trong các định dạng tài liệu khác ngoài HTML, chẳng hạn như SVG và XML, lớp giả

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 có thể tham chiếu đến một tổ tiên cấp cao hơn khác

Câu đố & Ghi chú

Giống như các bộ chọn lớp giả khác, bộ chọn

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 có thể được xâu chuỗi với các bộ chọn khác, chẳng hạn như

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

1 và các phần tử giả như

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2, để cung cấp các kiểu di chuột cho phần tử gốc ở các trạng thái khác nhau. Ví dụ: phần sau sẽ thay đổi màu nền của phần tử gốc khi nó được di chuột qua

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

Bạn có thể xem bản demo trực tiếp về điều này trong phần Live Demo bên dưới

ví dụ

Phần sau đây sẽ thêm nội dung vào phần tử gốc bằng cách sử dụng phần tử giả

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2

:root::after {
    content: "I am generated!";
    color: white;
    /* .. */
}
                

Xem bản demo trực tiếp bên dưới để biết ví dụ trực tiếp

Bản thử trực tiếp

Trong bản trình diễn trực tiếp sau đây, phần tử gốc

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

5 có hình nền, phần thân có màu nền xanh lục và một hộp màu tím được tạo và chèn vào

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

5 bằng cách sử dụng phần tử giả

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 và căn giữa trong chế độ xem. Lưu ý rằng phần tử giả không kế thừa các kiểu của

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

7 vì nó không được chứa bên trong nó—nó xuất hiện sau in trong tài liệu

Xem bản demo này trên Codrops Playground

Hỗ trợ trình duyệt

Bộ chọn lớp giả

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

2 được hỗ trợ trong Chrome, Firefox, Safari, Opera 9. 5+, Internet Explorer 9+ và trên Android và iOS

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.855 xếp hạng)

________số 8

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ố

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

0

đầ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ố

:root {
    background-color: #009966;
    /* smooth the color transition */
    transition: background-color .6s;
}

:root:hover {
    background-color: #0099ff
}
                

1

đầ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

Phần 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 –

Bạn có thể có nhiều root trong CSS không?

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

Làm cách nào để sử dụng các biến CSS?

Var trong CSS là gì?