CSS 伪类 :root 旨在选择文档层次结构中的根元素。当应用于 HTML 时，:root 专门指向 <html> 元素，其行为类似于 'html' 选择器。尽管如此，值得强调的是，与“html”相比，:root 具有更大的特异性。此选择器包含所有 HTML 元素或标记。
在声明全局 CSS 变量时，使用 :root 能是有利的。
:root {
// css declarations or property
}下面是一个示例，显示了使用 :root 声明全局CSS变量 -
<html>
<head>
<style>
:root {
--main-color: blue;
--secondary-color: white;
}
body {
background-color: var(--main-color);
}
h1 {
color: var(--secondary-color);
}
</style>
</head>
<body>
<h1>Welcome to CSS Root Example</h1>
<p>This is an example of using CSS root to define and use custom CSS variables.</p>
</body>
</html>
以下示例演示了如何使用 ：root 选择器来设置不同元素的样式 -
<html>
<head>
<title>:root Example</title>
<style>
:root {
--primary-color: red;
--secondary-color: blue;
--background-color: lightyellow;
}
body {
background-color: var(--background-color);
color: var(--secondary-color);
font-family: Arial, sans-serif;
}
h1 {
color: var(--primary-color);
}
p {
margin-bottom: 1rem;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>:root Example (set to --primary-color)</h1>
<p>Font color set to --secondary-color</p>
<p>The background color is set to --background-color</p>
<a href="#" class="button">Demo</a>
</div>
</body>
</html>