Question

我刚刚开始使用NetBeans IDE（6.9.1），并使用它在我的网站中添加样式表。

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

root { 
    display: block;
}

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

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

Answer 1

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

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

测试样式表：

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

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

Answer 2

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

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

Answer 3

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

Answer 4

：root可用于声明CSS变量

如果有人发现这个旧问题并且需要这些信息，/通常在示例中用于声明 CSS自定义属性或＆＃34;变量＆＃34;在整个文档中可用，例如：

:root

但是，任何元素都可以用作CSS变量的选择器（而不仅仅是:root { --darkGreen: #051; --myPink: #fce; } section { color: var(--darkGreen); background: var(--myPink); } article h3 { color: var(--darkGreen); }），因此:root或html也会启用任何元素访问它们的页面。如果有人有充分理由使用body，我想知道。

参考文献：

Answer 5

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

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

Answer 6

root和html之间存在差异，root伪类是CSS3实体，不影响旧浏览器（MSIE 8或更低版本，Opera 9.4或更低版本）

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

你必须在单词root之前放一个冒号，如下所示......

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

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

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

Answer 7

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

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

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

7 个答案:

：root可用于声明CSS变量

参考文献：