使用:root CSS选择器与使用html CSS选择器相比有什么好处？

Question

使用:root CSS选择器与使用html CSS选择器相比有什么好处？

12

在HTML文档中，CSS3引入的伪类选择器:root与html选择器相同，唯一的区别是:root具有更高的特异性。

如果它们几乎相同，那么使用:root的实际好处是什么？

我已经阅读过:root选择器对于声明全局CSS变量非常有用，即在整个HTML代码中都可以访问的变量。但是我也可以使用html选择器设置变量，并且它也将在整个HTML代码中可用。我在https://alligator.io/css/root-pseudo-class/上找到的唯一好处是，在:root中设置的CSS变量也可以用于样式化SVG图形。这是唯一的好处吗？

- iwis

2

请添加一些代码片段，使这个问题作为参考。 - SaidbakR

@SaidbakR，很遗憾，我不了解SVG，因此无法提供任何SVG示例。我之所以提出这个问题，是因为我只想知道在纯HTML文档中:root和html选择器之间的区别。在HTML中唯一的区别在于特异性：:root具有（0,1,0）特异性，即一个伪类，而html具有（0,0,1）特异性，即一个元素。 - iwis

@SaidbakR，我也不知道有什么情况需要比（0,0,1）更高的特异性来选择“html”选择器，因为我很少使用“html”选择器。 - iwis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dai · Accepted Answer

在你最后提到:root可以匹配非HTML文档中的<html>和<svg>-或任何其他根元素时，实际上回答了你自己的问题。

请记住，CSS也设计成兼容不仅仅是HTML和SVG，还包括XML，而对于XML文档，根元素可能与子元素共享相同的元素名称，因此这是一种使用CSS选择器的方式，因为CSS没有其他方法来选择只有根元素进行样式设置，所以它与:first-child、:first-of-type、:last-of-type等选择器属于同一类别。

此外，值得注意的是，格式错误的HTML文档可能在DOM中的其他位置具有不合法的<html>元素。如果您只使用html作为选择器，则这些额外的<html>元素也将被样式化，这将破坏您网站的布局（如果您有日常使用的html { min-height: 100%; height: 100%; }规则）。将其更改为html:root { ... }即可解决该问题。