什么是 css / html `root` 元素？答案

【问题标题】：What is the css / html `root` element?什么是 css / html `root` 元素？
【发布时间】：2010-10-12 16:19:37
【问题描述】：

我最近刚刚开始使用 NetBeans IDE (6.9.1)，并已使用它向我的正在进行的站点添加样式表。

令我惊讶的是，自动添加了一个元素：

root { 
    display: block;
}

环顾四周，我可以找到一些关于 :root 伪类的信息，但没有找到关于 root 元素本身的信息。

root 元素是什么，它有什么用处？

【问题讨论】：

标签： html css netbeans

【解决方案1】：

HTML 中没有元素称为根。 html 元素本身是“根元素”（该元素是文档中所有其他元素的祖先元素的术语），但这将与 html { } 匹配。

但是，请参阅the :root pseudo-class（带有冒号）。

【讨论】：

【解决方案2】：

从这里：http://www.quirksmode.org/css/root.html

:root 伪元素选择页面中所有块的根，即。初始包含块。在 HTML 中这显然是<html> 元素

测试样式表：

 :root {    
     background-color: #6374AB;
    padding: 50px; 
 }

如果 :root 选择器左右工作页面的列是蓝色的，并且白色中间列偏移 50 像素。

【讨论】：

谢谢，这也是我发现的，但我想知道 NetBeans 插入的 root 元素，而不是伪元素。
由于没有这样的 html 标记，而且它似乎没有记录在我能找到的任何地方，我猜它是作为示例代码向您展示 css 的假设寻找新人。我只能告诉你，它肯定在模板中，如果你不喜欢它，你可以在“工具-模板”下自己编辑模板，然后进入“Web”文件夹。我不会认为这是一个“错误”，因为它显然是故意的。更像是“未记录的无用功能”。
我猜你是对的，这不是真正的错误；我已经更改了模板，所以我不会再看到它了。
他们输出的root 元素根本不存在。模板生成无效/无意义的代码怎么不是错误？

【解决方案3】：

root 是 NetBeans IDE 样式表模板中任何元素的占位符。它就像微积分中的虚拟变量。请将光标放在root { display: block; } 中的y: 上删除y: 并键入y。 IDE 会弹出到提供有价值信息的指令窗口。它们对根的这种含义只是一个虚拟变量。例如em {display: inline; } 此外，root 是您开始的点，它是具有分支和叶子的 html 树的最深祖先。因此，在开始时，默认情况下您有一个框，所有分支和叶子都遵循该默认值，除非您将它们的默认显示更改为其他值，例如 inline。

【讨论】：

令人惊讶的是，这是唯一真正回答问题的答案。所有其他人都将“root”读作“:root”，这个问题没有问到。

【解决方案4】：

:root 可用于声明 CSS 变量

如果有人发现这个老问题并需要相关信息，:root 经常在示例中用于声明 CSS 自定义属性 或在整个文档中可用的“变量”，例如：

    :root {
      --darkGreen: #051;
      --myPink: #fce;
    }
    
    section {
      color: var(--darkGreen);
      background: var(--myPink);
    }

    article h3 {
      color: var(--darkGreen);
    }

但是，任何元素都可以用作 CSS 变量的选择器（不仅仅是:root），因此html 或body 也将允许页面上的任何元素访问它们。如果有人有充分的理由使用:root，我很想知道。

参考资料：

【讨论】：

:root 伪元素比html 元素具有更高的特异性，因此，最好将CSS 变量设置在:root 内部，即全局且高于html 元素——这样做是为了在级联上进行一般卫生。否则，是的，html 和 body 元素都将沿树向下传递变量，正如您正确指出的那样。
“:root 伪元素具有更高的特异性” 这不应该读作 lower 特异性吗？这样html 上设置的变量会否决:root 上设置的变量？
不符合CSS Tricks。

【解决方案5】：

:root 元素是没有父元素的元素，所以我猜 HTML 中唯一的根元素是 <html> 元素。因此，当您使用:root 选择器进行样式设置时，它将为整个文档设置样式。

（我在这里找到了更多信息：http://webdesign.about.com/cs/css/qt/tipcsschild.htm 和这里：http://www.w3schools.com/cssref/sel_root.asp）。

【讨论】：

【解决方案6】：

root和html是有区别的，root伪类是CSS3实体，不影响老浏览器（MSIE 8以下，Opera 9.4以下）

html /* for all web browsers */
{
    color:red; 
}

你必须在词根之前加一个冒号，如下所示...

:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
    color:blue;
}

如果您同时使用这两个 CSS 行，则 MSIE 版本 8 或更低版本（或在兼容模式下运行时显示为 MSIE 7 的 MSIE 9+）会显示红色文本，而大多数其他浏览器会显示蓝色文本。

“root”的文档和规范可以在 Mozilla 开发者网络中找到：https://developer.mozilla.org/en-US/docs/Web/CSS/:root

【讨论】：

【解决方案7】：

:root 选择器允许您定位 DOM 或文档树中最高级别的“父”元素。它在CSS Selectors Level 3 spec 中被定义为“结构伪类”，这意味着它用于根据内容与父级和兄弟级内容的关系来设置内容样式。

在您可能遇到的绝大多数情况下，:root 指的是网页中的<html> 元素。在 HTML 文档中，html 元素始终是最高级别的父元素，因此:root 的行为是可以预测的。然而，由于 CSS 是一种可以与其他文档格式一起使用的样式语言，例如 SVG 和 XML，因此在这些情况下，:root 伪类可以引用不同的元素。无论使用哪种标记语言，:root 将始终选择文档树中文档的最顶层元素。

【讨论】：