:root CSS 变量

在CSS中，:root 伪类选择器用于选择文档的根元素，通常就是 <html> 元素。使用 :root 可以方便地为整个文档定义全局的 CSS 变量。

什么是CSS变量？

CSS变量又叫做自定义属性（Custom Properties），可以用来在CSS中存储和重复使用值。通过声明和使用CSS变量，我们可以轻松地调整页面样式，实现代码的可重用和组件化。

CSS变量的声明形式为 --variable-name，其中 variable-name 是自定义的变量名。可以使用 var() 函数来引用这些变量，并在需要的地方动态地改变其值。

如何使用:root和CSS变量？

在文档的根元素中使用 :root 伪类来声明全局的CSS变量。在根元素中声明的变量可以在整个文档中使用。

:root {
  --main-color: #3498db;
  --secondary-color: #e74c3c;
}

在上面的示例中，我们声明了两个全局的CSS变量 --main-color 和 --secondary-color，分别表示主要颜色和次要颜色。

在样式中使用CSS变量

使用 var() 函数可以在CSS样式中引用之前声明的CSS变量，从而实现样式的动态调整。

body {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

在上面的示例中，我们将 --main-color 变量的值赋给了 background-color 属性，将 --secondary-color 变量的值赋给了 color 属性。这样我们就可以通过改变变量的值来改变整个文档的外观。

交互式示例

下面是一个交互式示例，展示如何通过改变CSS变量的值来实时改变页面的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Variables Demo</title>
  <style>
    :root {
      --main-color: #3498db;
      --secondary-color: #e74c3c;
    }

    body {
      background-color: var(--main-color);
      color: var(--secondary-color);
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    h1 {
      font-size: 2em;
      margin-bottom: 20px;
    }

    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 1em;
      border: none;
      cursor: pointer;
    }

    .main {
      --main-color: #2ecc71;
    }

    .secondary {
      --secondary-color: #f39c12;
    }
  </style>
</head>
<body>
  <h1>CSS Variables Demo</h1>
  <button class="main">Change Main Color</button>
  <button class="secondary">Change Secondary Color</button>

  <script>
    document.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', function() {
        document.documentElement.classList.toggle(this.className);
      });
    });
  </script>
</body>
</html>

在这个示例中，我们创建了两个按钮，分别用来改变主要颜色和次要颜色。通过点击按钮，页面的背景和文字颜色会实时改变为我们预先设置的值。