📌  相关文章
📜  CSS | :root 选择器(1)

📅  最后修改于: 2023-12-03 15:00:06.038000             🧑  作者: Mango

CSS | :root 选择器

介绍

:root 选择器是 CSS 中的一个伪类选择器，它匹配文档根元素，即 元素。在 HTML 页面中， 元素是文档的最高级元素。

通过 :root 选择器，我们可以在全局范围内定义 CSS 变量（CSS variables），使之成为全局可用的变量。这种全局定义和使用变量的方式非常方便，可以让开发者在整个网页中快速设定和调整样式。

语法

:root 选择器的语法如下：

:root {
    /* define CSS variables here */
}

在 :root 选择器中，我们可以定义全局的 CSS 变量。定义变量时，需要使用 -- 开头，后面跟着变量名和变量值。例如：

:root {
    --primary-color: #007bff;
    --border-radius: 4px;
}

在网页中使用这些全局变量时，可以通过 var() 函数进行调用。例如：

a {
    color: var(--primary-color);
    border-radius: var(--border-radius);
}
示例

下面的示例展示了如何使用 :root 选择器定义全局的 CSS 变量，并在网页中使用这些变量。

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary-color: #007bff;
            --border-radius: 4px;
        }
        a {
            color: var(--primary-color);
            border-radius: var(--border-radius);
            border: 1px solid var(--primary-color);
            padding: 10px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }
        .btn:active {
            background-color: var(--primary-color);
            color: #fff;
        }
    </style>
</head>
<body>
    <a class="btn" href="#">Click me</a>
</body>
</html>

在上面的示例中，我们在 :root 选择器中定义了两个全局变量 --primary-color 和 --border-radius，并在 a 元素中使用了这些变量。当鼠标点击按钮时，按钮的背景颜色和文字颜色会发生变化，这是通过为 :active 状态的按钮使用了 --primary-color 变量实现的。

结果如下：

CSS | :root 选择器示例结果

总结

:root 选择器是一种非常方便的全局定义和使用 CSS 变量的方式，可以让开发者快速设定和调整样式。在实际开发中，可以使用 :root 选择器来定义全局的颜色、字体大小、边距等变量，然后在各个元素中使用这些变量，可以大大提高开发效率。