时间戳

首页 > 解决方案 > 使用 :root CSS 选择器而不是 html CSS 选择器有什么好处？

css - 使用 :root CSS 选择器而不是 html CSS 选择器有什么好处？

问题描述

在 HTML 文档:root中，CSS3 中引入的伪类选择器等同于html选择器，唯一的区别是:root具有更高的特异性。如果它们几乎相同，那么使用的实际好处是:root什么？

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

标签： csscss-selectors

解决方案

:root最后一点关于匹配<html>和<svg>- 或非 HTML 文档中的任何其他根元素，您几乎回答了您自己的问题。

请记住，CSS 不仅与 HTML 和 SVG 兼容，而且还与 XML 兼容，并且对于 XML，根元素可能与子元素共享相同的元素名称 - 所以这是一种方式处理这些类型的文档，因为 CSS 没有提供仅选择根:first-child元素进行样式设置的其他方法，因此它与, :first-of-type,:last-of-type等属于同一家族。

我还要补充一点，格式错误的 HTML 文档可能<html>在 DOM 的其他地方有非法元素。如果您仅html将其用作选择器，那么这些附加<html>元素也将被设置样式，如果您有常规html { min-height: 100%; height: 100%; }规则，这将破坏您网站的布局。改变它来html:root { ... }解决这个问题。

推荐阅读