:root | CSS属性参考 - 易微帮博客

共计 511 个字符，预计需要花费 2 分钟才能阅读完成。

CSS :root伪类选择器用于匹配代表文档根元素的元素。

在 HTML4 中，文档的根元素是指 <html> 元素。<html>元素是一个文档中所有其它元素的父元素。因此，:root伪类和 html 选择器指的是相同的意思。但是 :root 伪类选择器的优先级更高。

例如，如果有下面的 CSS 规则，即使 html 选择器规则写在 :root 规则之后，它也会被 :root 规则覆盖。

:root {/* style the root element */}

html {/* style the root element */}

在其它非 HTML 的文档中，如 SVG 或 XML 文档，:root伪类选择器可以匹配任何最高级的祖先元素。

下面的示例代码使用 ::after 伪元素在根元素上添加一些额外的内容。

:root::after {
    content: "这是额外添加的内容";
    color: white;
    /* ... */
}

所有的现代浏览器都支持 :root 伪类选择器，包括：Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

:root | CSS属性参考