:root | CSS属性参考

09-22 次

标签 css教程 css属性伪类选择器

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。