:root CSS 伪类旨在选择文档层次结构中的根元素。当应用于 HTML 时，:root 特别指向 <html> 元素，其行为与 `html` 选择器类似。尽管如此，值得强调的是，与"html"相比，:root 具有更大的特异性。此选择器包括所有 HTML 元素或标签。

声明全局 CSS 变量时，使用 :root 非常有利。

语法

:root {
  // CSS 声明或属性
  --main-color: blue;
  --secondary-color: white;
}

CSS root: 声明全局 CSS变量

这是显示 :root 用法的示例 -

<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>欢迎使用 CSS root 示例</h1>
  <p>这是使用 CSS root 定义和使用自定义 CSS 变量的示例。</p>
</body>
</html>

CSS root: 设置不同元素的样式

这是另一个演示 :root 用法的示例:root 选择器用于设置不同元素的样式 -

<html>
<head>
<title>:root Example</title>
<style>
   :root {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --background-color: #fcfc90;
   }

   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;
      background-color: LightYellow;
      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 例子</h1>
      <p>这是使用 <code>:root</code> 选择器定义全局 CSS 变量的示例。</p>
    <p>主色设置为<span style="color: var(--primary-color);">var(--primary-color)</span>。</p>
    <p>辅助颜色设置为<span style="color: var(--secondary-color);">var(--secondary-color)</span>。</p>
    <p>背景颜色设置为<span style="background-color: var(--background-color); color:white;">var(--background-color)</span>。</p>
    <a href="#" class="button">演示</a>
   </div>
</body>
</html>