:root

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

:root 选择器允许您定位 DOM 或文档树中最高级别的“父”元素。 它在 CSS 选择器级别 3 规范 中定义为“结构性伪类”,这意味着它用于根据其与父级和同级内容的关系来设置内容的样式。

在您可能遇到的绝大多数情况下,:root 指的是网页中的 <html> 元素。 在 HTML 文档中,html 元素始终是最高级别的父级,因此 :root 的行为是可预测的。 但是,由于 CSS 是一种样式语言,可以与其他文档格式一起使用,例如 SVGXML,因此 :root 伪类可以在这些情况下引用不同的元素。 无论标记语言如何,:root 始终 会选择文档树中文档的最顶层元素。

在下面的示例中,:root 伪类选择器用于在 <body> 元素后面创建背景颜色。 在这种情况下,可以使用 CSS 中的 html 元素选择器来实现相同的效果。

Check out this Pen!

要点

  • 虽然 :root 选择器和 html 选择器都定位相同的 HTML 元素,但了解 :root 实际上具有更高的特异性 可能会有用。 伪类选择器(但不是 伪元素)的特异性等于类的特异性,高于基本元素选择器。

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
是的 是的 是的 9.5+ IE9+ 是的 是的