CSS :root 选择器

CSS 中的 :root 选择器是一个伪类，它匹配文档树的根元素。对于 HTML 文档，:root 代表 <html> 元素本身，因此此选择器与 html 元素选择器相同。但 :root 选择器比 HTML 元素选择器具有更高的特异性。

语法

/* Selects the root element (<html>) of the document */
:root {
    // css variable declarations or properties
}

声明全局 CSS 变量

根选择器的主要目的是在 CSS 中声明变量。这将允许在样式表中的所有选择器中全局访问。让我们看一个例子。

示例

<!DOCTYPE html>
<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	4.0	9.0	3.5	3.2	9.6

css_properties_reference.htm

打印页面