什么是 css / html `root` 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3916824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the css / html `root` element?
提问by jeroen
I have just recently started using NetBeans IDE (6.9.1) and have used it to add a stylesheet to my site-in-progress.
我最近才开始使用 NetBeans IDE (6.9.1) 并使用它向我的正在进行的站点添加样式表。
To my surprise, one element was automatically added:
令我惊讶的是，自动添加了一个元素：
root {
display: block;
}
Looking around, I could find some information about the :rootpseudo-class but nothing about the rootelement itself.
环顾四周，我可以找到一些关于:root伪类的信息，但没有找到关于root元素本身的信息。
What is the rootelement and does it have any use?
什么是root元素，它有什么用？
采纳答案by Quentin
There is no element calledroot in HTML. The html element itself is "the root element" (which is the term given to the element which is the ancestor of all the other elements in the document), but this would be matched by html { }.
HTML 中没有名为root 的元素。html 元素本身是“根元素”（这是给作为文档中所有其他元素的祖先的元素的术语），但这将由html { }.
However, see the :rootpseudo-class(with a colon).
然而，看到的:root伪类（以冒号）。
回答by David
From here: http://www.quirksmode.org/css/root.html
从这里：http: //www.quirksmode.org/css/root.html
The :root pseudo-element selects the root of all blocks in the page, ie. the Initial Containing Block. In HTML this is obviously the
<html>elementTest stylesheet:
:root 伪元素选择页面中所有块的根，即。初始包含块。在 HTML 中，这显然是
<html>元素测试样式表：
:root {
background-color: #6374AB;
padding: 50px;
}
If the :root selector works the left and right column of the page are blue, and the white middle column is offset by 50 pixels.
如果 :root 选择器起作用，页面的左右列是蓝色的，白色的中间列偏移 50 个像素。
回答by peter jones
root is a placeholder for any element in the stylesheet template of NetBeans IDE. It is like a dummy variable in calculus. Please put the cursor on y: in the root { display: block; }delete y: and type y. IDE pops up into the instruction window that gives valueable information. They conducts to such a meaning for the root as just a dummy variable. Examples are em {display: inline; }Additionally, root is the point where you begin, the deepest ancestor of the html tree with branches and leaves. So at the beginning you have a box by default and all branches and leaves follow that default unless you change their default display, when they occur, to other values such as, say, inline.
root 是 NetBeans IDE 样式表模板中任何元素的占位符。它就像微积分中的虚拟变量。请将光标放在root { display: block; }删除 y:中的y: 上并键入 y。IDE 弹出指令窗口，提供有价值的信息。它们对根的这种意义仅仅作为一个虚拟变量。示例是em {display: inline; }此外，root 是您开始的点，是具有分支和叶子的 html 树的最深祖先。因此，一开始默认情况下您有一个框，所有分支和叶子都遵循该默认值，除非您将它们的默认显示更改为其他值，例如内联。
回答by Dave Everitt
:root can be used to declare CSS variables
:root 可用于声明 CSS 变量
in case anyone finds this old question and needs the information, :rootis often used in examples to declare CSS Custom Propertiesor "variables" that become available throughout the document, for example:
万一有人发现这个老问题并需要信息，:root通常在示例中用于声明CSS 自定义属性或在整个文档中可用的“变量”，例如：
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
However, any elementcan be used as the selector for CSS variables (not just :root) so htmlor bodywill also enable any element on the page to access them. If anyone has a good reason for using :root, I'd like to know it.
但是，任何元素都可以用作 CSS 变量的选择器（不仅仅是:root），因此html或body也将启用页面上的任何元素来访问它们。如果有人有充分的理由使用:root，我想知道。
References:
参考：
回答by mariamtin
The :rootelement is the element who has no parents, so I guess that the only root element in HTML is the <html>element..
So when you use the :rootselector to style, it will style the whole document.
该:root元素是谁没有父母，所以我想在HTML中唯一的根元素是元素<html>元素。所以，当你使用:root选择的款式，它将样式整个文档。
(I found more information here: http://webdesign.about.com/cs/css/qt/tipcsschild.htmand here: http://www.w3schools.com/cssref/sel_root.asp).
（我在这里找到了更多信息：http: //webdesign.about.com/cs/css/qt/tipcsschild.htm和这里：http: //www.w3schools.com/cssref/sel_root.asp）。
回答by Jeff Clayton
There is a difference between root and html, the root pseudo-class is a CSS3 entity, and does not affect older browsers (MSIE 8 or less, Opera 9.4 or less)
root 和 html 有区别，root 伪类是 CSS3 实体，不影响旧浏览器（MSIE 8 或更低，Opera 9.4 或更低）
html /* for all web browsers */
{
color:red;
}
You have to put a colon before the word root as follows...
你必须在词根之前放一个冒号，如下所示......
:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
color:blue;
}
If you used both of these CSS lines, MSIE version 8 or less (or MSIE 9+ when running in compatibility mode, which renders as MSIE 7) would show red text, most other browsers would show blue text.
如果您同时使用这两个 CSS 行，MSIE 8 或更低版本（或在兼容模式下运行时的 MSIE 9+，呈现为 MSIE 7）将显示红色文本，大多数其他浏览器将显示蓝色文本。
Documentation and specs for 'root' can be found at the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
“root”的文档和规范可以在 Mozilla 开发者网络找到：https: //developer.mozilla.org/en-US/docs/Web/CSS/:root
