:root | CSS属性参考

865次阅读
没有评论

共计 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。

相关阅读
正文完
 0