使用：根CSS选择器而不是html CSS选择器的好处是什么？

在HTML文档中，CSS3中引入的

：root

伪类选择器等同于

HTML

选择器，唯一的区别是

：root

具有更高的特异性。 如果它们几乎相同，那么使用

：root

的实际好处是什么

---

我已经读到，

：root

选择器对于声明全局CSS变量非常有用，即在整个HTML代码中可以访问的变量。但是，我可以使用

html

selector设置一个变量，它也可以在整个html代码中使用。我发现的唯一好处是，在

：root

中设置的CSS变量也可以用于设置SVG图形的样式。这是唯一的好处吗？

最后一点关于

：root

匹配

和

-或非HTML文档中的任何其他根元素，这几乎回答了您自己的问题

请记住，CSS的设计目的不仅仅是与HTML和SVG兼容，它还与XML兼容，对于XML，根元素可能与子元素共享相同的元素名称，因此这是一种处理这些类型文档的方法，因为CSS没有其他方法只选择根元素进行样式设置，因此它与

：first child

，

：type的first

，

：type的last

，等等属于同一家族

---

我还要补充一点，格式错误的HTML文档可能在DOM的其他地方有一个非法的

元素。如果您仅使用

html

作为选择器，那么这些额外的

元素也将被设置样式，如果您使用普通的

html{min height:100%；height:100%；}

规则，这将破坏站点的布局。将其更改为

html:root{…}

可以解决这一问题。

请添加一些代码片段，将此问题作为参考。@SaidbakR，很遗憾，我不懂SVG，因此无法给出任何SVG示例。我问这个问题是因为我只想知道纯html文档中的

：root

和

html

选择器之间的区别。HTML唯一的区别在于特殊性：

：root

具有（0,1,0）特殊性，即一个伪类，

HTML

具有（0,0,1）特殊性，即一个元素。@SaidbakR，我也不知道在什么情况下，

HTML

选择器需要大于（0,0,1）的特殊性，因为我很少使用

html

选择器。