#书摘 #css #前端
《CSS 选择器世界》 :root伪类
:root伪类用来匹配文档的根元素，下面进行详细分析。
由于没有特别需要使用:root伪类的理由，反正匹配的是
实际上，下面两个开发场景中更推荐使用:root伪类。
1. 利用:root伪类的高优先级
假设引入了某些UI组件库，如果这些组件对html标签进行了一些设置，而这些设置是开发人员不需要的，我们就可以使用:root伪类进行重置，因为:root伪类的优先级更高，不用担心不能重置。例如设置了如下的CSS：
我们就可以用如下代码重置，以确保页面内容在加载过程中不会出现晃动。
另外，借助 :root 伪类提高任意选择器的优先级也是一种常见的技巧，例如类名 .recover 不能重置某些样式，可以在其前面加上 :root，变成 :root .recover，说不定就可以重置了，毕竟任何页面都一定有根元素（除了根元素 svg 等特殊场景），这种写法要比 .recover.recover 的性能提高不少。
2. CSS变量
现代浏览器都已经支持CSS自定义属性（也就是CSS变量），其中有一些变量是全局的，如整站的颜色、主体布局的尺寸等。对于这些变量，业界约定俗成，都将它们写在:root伪类中。
大家千万不要以为将CSS变量写在:root伪类中有什么特别的作用，这只是一种写法而已，其效果和写在html标签选择器中是一样的，因为全局CSS变量一定都是用以继承的，只要是级别足够高的祖先选择器都可以。
之所以CSS变量都写在:root伪类中，可能是因为这样可以使代码的可读性更好。同样是根元素，html标签选择器负责样式，:root伪类负责变量，互相分离，各司其职。
https://memo.cosine.ren/m/347
《CSS 选择器世界》 :root伪类
: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，说不定就可以重置了，毕竟任何页面都一定有根元素（除了根元素 svg 等特殊场景），这种写法要比 .recover.recover 的性能提高不少。
2. CSS变量
现代浏览器都已经支持CSS自定义属性（也就是CSS变量），其中有一些变量是全局的，如整站的颜色、主体布局的尺寸等。对于这些变量，业界约定俗成，都将它们写在:root伪类中。
大家千万不要以为将CSS变量写在:root伪类中有什么特别的作用，这只是一种写法而已，其效果和写在html标签选择器中是一样的，因为全局CSS变量一定都是用以继承的，只要是级别足够高的祖先选择器都可以。
之所以CSS变量都写在:root伪类中，可能是因为这样可以使代码的可读性更好。同样是根元素，html标签选择器负责样式，:root伪类负责变量，互相分离，各司其职。
https://memo.cosine.ren/m/347
