DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
:root
选择器允许您定位 DOM 或文档树中最高级别的“父”元素。 它在 CSS 选择器级别 3 规范 中定义为“结构性伪类”,这意味着它用于根据其与父级和同级内容的关系来设置内容的样式。
在您可能遇到的绝大多数情况下,:root
指的是网页中的 <html>
元素。 在 HTML 文档中,html
元素始终是最高级别的父级,因此 :root
的行为是可预测的。 但是,由于 CSS 是一种样式语言,可以与其他文档格式一起使用,例如 SVG 和 XML,因此 :root
伪类可以在这些情况下引用不同的元素。 无论标记语言如何,:root
始终 会选择文档树中文档的最顶层元素。
在下面的示例中,:root
伪类选择器用于在 <body>
元素后面创建背景颜色。 在这种情况下,可以使用 CSS 中的 html
元素选择器来实现相同的效果。
Check out this Pen!
要点
- 虽然
:root
选择器和html
选择器都定位相同的 HTML 元素,但了解:root
实际上具有更高的特异性 可能会有用。 伪类选择器(但不是 伪元素)的特异性等于类的特异性,高于基本元素选择器。
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
是的 | 是的 | 是的 | 9.5+ | IE9+ | 是的 | 是的 |
谢谢,这真的很有帮助。我一直想知道为什么我们不能将 HTML 作为父选择器。
我尝试在 div 获取焦点时设置 body 的样式,但我没有成功。有什么想法吗?