CSS 选择器 :root

概述

:root 是一个伪类选择器，用于匹配文档的根元素。在 HTML 中，根元素始终是 <html> 元素。使用 :root 选择器可以确保你的样式规则应用在整个文档中，同时具有更高的优先级。

使用场景

:root 通常用于定义全局变量或设置整个页面的基础样式。由于它代表的是整个文档的根节点，因此其优先级较高，可以覆盖其他普通的选择器。这对于创建主题或样式重置非常有用。

示例代码

// www.javascriptcn.com code example
/* 定义全局颜色变量 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

/* 应用全局颜色到页面元素 */
body {
  background-color: var(--primary-color);
}

a {
  color: var(--secondary-color);
}

注意事项

• :root 选择器的应用范围仅限于文档的根元素，在大多数情况下，这也就是 <html> 元素。
• 尽管 :root 的优先级高于大多数其他选择器，但仍然低于 ID 选择器和带有 !important 规则的选择器。
• 使用 :root 来定义 CSS 变量是一个很好的实践，因为它使得变量在整个文档中都可访问，便于维护和修改。

实际案例

假设我们正在开发一个网站，并希望在整个网站中使用一致的主题颜色。我们可以使用 :root 来定义这些颜色，并通过 CSS 变量将其应用于不同的组件。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS :root 示例</title>
  <style>
    :root {
      --primary-color: #4CAF50;
      --secondary-color: #2196F3;
    }
    
    body {
      font-family: Arial, sans-serif;
      background-color: var(--primary-color);
      color: white;
    }

    a {
      color: var(--secondary-color);
      text-decoration: none;
    }

    header {
      background-color: var(--secondary-color);
      padding: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>欢迎来到我们的网站</h1>
  </header>
  <main>
    <p>这是一个使用全局颜色变量构建的示例页面。</p>
    <a href="#">点击这里了解更多</a>
  </main>
</body>
</html>

在这个例子中，我们定义了两个全局颜色变量，并将它们分别应用于页面的背景色和链接颜色。这样的设计让整个页面看起来更加统一和专业。