首页 > 编程笔记
CSS :root伪类的用法
:root 伪类用来匹配文档的根元素,本节进行详细地分析。
例如,给 <html> 元素加一个类名,如下:
有人可能会恍然大悟:如果页面没有设置 <html> 根元素,就不会匹配!
其实,对于 HTML 页面,就算不设置 html 标签,浏览器也会自动补上 html 标签的,依然会匹配。这里描述的场景其实是浏览器访问 XML 文件或者 SVG 文件。例如,在 SVG 文件中 :root 就不等同于 html 标签了,而是 svg 标签。这个很好测试,我们随便找一个 SVG 图形元素,如果内联在 HTML 页面中,在 svg 标签匹配的是 svg:not(:root),相关代码如下:
不过,从实际 Web 开发的角度看,XHTML 语言的文档处于绝对垄断地位,因此,:root 伪类直接等同于 html 标签也是没有问题的。
另外,在 Shadow DOM 中虽然也有根的概念(称为 shadowRoot),但并不能匹配 :root 伪类,也就是在 Shadow DOM 中,:root 伪类是无效的,应该使用专门为此场景设计的 :host 伪类。
实际上,下面两个开发场景中更推荐使用 :root 伪类。
例如设置了如下的 CSS:
大家千万不要以为将 CSS 变量写在 :root 伪类中有什么特别的作用,这只是一种写法而已,其效果和写在 html 标签选择器中是一样的,因为全局 CSS 变量一定都是用以继承的,只要是级别足够高的祖先选择器都可以。
之所以 CSS 变量都写在 :root 伪类中,可能是因为这样可以使代码的可读性更好。同样是根元素,html 标签选择器负责样式,:root 伪类负责变量,互相分离,各司其职。
例如:
:root伪类匹配的究竟是什么
在 99.99% 的 Web 开发场景中,:root 伪类表示的就是 <html> 元素,二者完全等同。例如,给 <html> 元素加一个类名,如下:
<html class="html"></html>此时,设置背景色就可以看到整个页面的背景色变成天蓝色了:
:root.html { background: skyblue; }或者直接使用 html 标签也可以证明:
html:root { background: skyblue; }所以,问题来了,如果只是为了匹配 <html> 元素,那么直接使用 html 标签选择器不就可以了吗?为什么还需要额外设计 :root 伪类呢?因为在有些场景下,文档的根元素并不是 <html> 元素。
有人可能会恍然大悟:如果页面没有设置 <html> 根元素,就不会匹配!
其实,对于 HTML 页面,就算不设置 html 标签,浏览器也会自动补上 html 标签的,依然会匹配。这里描述的场景其实是浏览器访问 XML 文件或者 SVG 文件。例如,在 SVG 文件中 :root 就不等同于 html 标签了,而是 svg 标签。这个很好测试,我们随便找一个 SVG 图形元素,如果内联在 HTML 页面中,在 svg 标签匹配的是 svg:not(:root),相关代码如下:
svg:not(:root){ overflow:hidder; }但是如果这个 SVG 图形作为 SVG 文件在浏览器中打开,则打开控制台就会看到 svg 标签匹配的是 svg:root,也就是此时 :root 伪类匹配的是 svg 标签,相关代码如下:
svg:root{ width:100%; heigth:100%; }因此,:root 伪类匹配的是根元素,而 Web 中的根元素有很多种,<html> 只是其中之一。
不过,从实际 Web 开发的角度看,XHTML 语言的文档处于绝对垄断地位,因此,:root 伪类直接等同于 html 标签也是没有问题的。
另外,在 Shadow DOM 中虽然也有根的概念(称为 shadowRoot),但并不能匹配 :root 伪类,也就是在 Shadow DOM 中,:root 伪类是无效的,应该使用专门为此场景设计的 :host 伪类。
:root伪类的应用场景
由于没有特别需要使用 :root 伪类的理由,反正匹配的是 <html> 元素,因此为何不直接使用 html 标签选择器呢?这样兼容性更好,优先级更低,是这样吗?实际上,下面两个开发场景中更推荐使用 :root 伪类。
1) 利用:root伪类的高优先级
假设引入了某些 UI 组件库,如果这些组件对 html 标签进行了一些设置,而这些设置是开发人员不需要的,我们就可以使用 :root 伪类进行重置,因为 :root 伪类的优先级更高,不用担心不能重置。例如设置了如下的 CSS:
html{ overflow-y: scroll; }我们就可以用如下代码重置,以确保页面内容在加载过程中不会出现晃动。
:root{ overflow-y: auto; scrollbar-gutter: stable; }另外,借助 :root 伪类提高任意选择器的优先级也是一种常见的技巧,例如类名 .recover 不能重置某些样式,可以在其前面加上 :root,变成 :root .recover,说不定就可以重置了,毕竟任何页面都一定有根元素,这种写法要比 .recover.recover 的性能提高不少。
2) CSS变量
现代浏览器都已经支持 CSS 自定义属性(也就是 CSS 变量),其中有一些变量是全局的,如整站的颜色、主体布局的尺寸等。对于这些变量,业界约定俗成,都将它们写在 :root 伪类中。大家千万不要以为将 CSS 变量写在 :root 伪类中有什么特别的作用,这只是一种写法而已,其效果和写在 html 标签选择器中是一样的,因为全局 CSS 变量一定都是用以继承的,只要是级别足够高的祖先选择器都可以。
之所以 CSS 变量都写在 :root 伪类中,可能是因为这样可以使代码的可读性更好。同样是根元素,html 标签选择器负责样式,:root 伪类负责变量,互相分离,各司其职。
例如:
:root { /* 颜色变量 */ --blue: #2486ff; --red: #f4615c; /* 尺寸变量 */ --layerWidth: 1190px; } html { overflow: auto; }