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

我刚刚开始使用NetBeans IDE（6.9.1），并使用它将样式表添加到正在进行的网站中。什么是css/html`root`元素？

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

root { 
    display: block; 
}

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

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

来源

2010-10-12 jeroen

在HTML中没有元素叫做根。 html元素本身是“根元素”（这是给元素的术语，它是文档中所有其他元素的祖先），但这将与html { }相匹配。

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

来源

2010-10-12 16:22:54 Quentin

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

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

测试样式表：

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

如果：根选择作品的页面是蓝色的左侧和右侧列，白中间的列被偏移50个像素。

来源

2010-10-12 16:22:50 David

谢谢，that's我发现了什么为好，但我想知道的'root'元素的NetBeans插入，而不是伪元素。 – jeroen 2010-10-12 18:36:29

由于没有这样的html标签，并且它看起来没有记录在任何可以找到它的地方，所以我会猜测它是作为示例代码来向您展示css应该如何寻找新手。我可以告诉你的是，它在模板中是有限的，如果你不喜欢“tools - templates”，然后进入“Web”文件夹，你可以自己编辑模板。我不认为它是一个“错误”，因为它显然是故意的。更像是“无证无用的功能”。 – David 2010-10-12 20:00:05

我想你是对的，这不是一个真正的bug;我改变了模板，所以我不会再看到它。 – jeroen 2010-10-12 21:36:40

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

来源

2011-07-31 09:20:56

的:root元素是谁没有父母的元素，所以我想在HTML中唯一的根元素是<html>元素.. 所以当你使用:root选择款式，它将样式整个文档。

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

来源

2012-11-16 14:18:26 mariamtin

root和html之间有区别，根伪类是一个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在兼容模式下运行时，9+显示为MSIE 7）会显示红色文本，其他大多数浏览器都会显示蓝色文本。

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

来源

2014-06-01 18:23:36

：根可用于声明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，我想知道它。

参考文献：

来源

2018-02-03 12:46:45

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

回答

：根可用于声明CSS变量

参考文献：

相关问题