使用:根CSS选择器而不是html CSS选择器有什么好处？
在:root文档中，CSS3中引入的html伪类选择器等于html选择器，唯一的区别是:root具有更高的特异性。如果它们几乎相同，那么使用:root的实际好处是什么？
我读过:root选择器对于声明全局CSS变量非常有用，即在整个HTML中可访问的变量。但是，我可以使用html选择器设置一个变量，并且它也可以在整个HTML代码中使用。我在https://alligator.io/css/root-pseudo-class/上发现的唯一好处是，:root中的CSS变量集也可以用于SVG图形的样式。这是唯一的好处吗？
回答 1
Stack Overflow用户
发布于 2020-04-24 13:32:55
关于:root匹配<html>和<svg>，或者非HTML文档中的任何其他根元素，您都回答了自己的问题。
请记住，CSS的设计也不仅仅是为了与HTML和SVG兼容，它也是为了与XML兼容，对于XML，根元素可能与子元素共享相同的元素--名称与子元素--所以这是一种处理此类文档的方法，因为CSS没有提供选择样式的根元素的其他方式，因此它与:first-child、:first-of-type、:last-of-type等属于同一个家族。
我要补充的是，一个格式错误的HTML文档可能在DOM的其他地方有一个非法的<html>元素。如果您只使用html作为选择器，那么这些附加的<html>元素也将被样式化，如果您有常见的html { min-height: 100%; height: 100%; }规则，这将破坏站点的布局。将其更改为html:root { ... }修复了这个问题。
https://stackoverflow.com/questions/61409490
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号