CSS :root选择器

CSS :root选择器可以用来选择文档的根元素，一般情况下指html元素。使用根选择器可以方便的设置全局样式。

语法

:root {
  /* 样式规则 */
}

示例

:root {
  --main-color: #007bff;
}

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

上述代码中，我们使用了:root选择器来定义了一个全局的变量--main-color，并将它的值设置为蓝色(#007bff)。在body元素中，我们使用了通过var()函数引用这个变量，并将它的值作为字体颜色，使得整个页面字体颜色都为蓝色。

注意点

• 根选择器只能出现一次。
• 在:root选择器中定义的变量能够在整个文档中使用。
• 根选择器中定义的变量可以被嵌套选择器所继承。

总结

CSS :root选择器允许我们定义全局样式，使所有元素都能继承这些样式。通过定义变量，我们能够方便的修改全局样式。这让我们可以很容易地维护代码和保持一致的风格。