我最近才开始使用NetBeans IDE（6.9.1），并使用它向我正在开发的站点添加了一个样式表。令我惊讶的是，系统自动添加了一个元素：
root { display: block; }
环顾四周，我可以找到一些关于:root伪类的信息，但没有关于root元素本身的信息。什么是root元素，它有什么用处吗？
:root
root
ulmd4ohb1#
在HTML中没有元素 * 称为 * root。html元素本身是“根元素”（这是赋予文档中所有其他元素的祖先的元素的术语），但这将与html { }匹配。但是，请参阅:root伪类（带冒号）。
html { }
cidc1ykv2#
从此处开始：http://www.quirksmode.org/css/root.htmlroot伪元素选择页面中所有块的根，即初始包含块。在HTML中，这显然是<html>元素测试样式表：
<html>
:root { background-color: #6374AB; padding: 50px; }
如果：root选择器正常工作，页面的左列和右列为蓝色，中间的白色列偏移50个像素。
6jjcrrmo3#
root是NetBeans IDE样式表模板中任何元素的占位符。它类似于微积分中的伪变量。请将光标放在y：在root { display: block; }中删除y：然后输入y。IDE会弹出一个说明窗口，提供有价值的信息。它们将根作为一个伪变量进行处理。例如em {display: inline; }。此外，根是您开始的点，具有分支和叶子的HTML树的最深祖先。因此，在开始时，您有一个默认的框，所有分支和叶都遵循该默认值，除非您将它们的默认显示更改为其他值，例如，内联。
em {display: inline; }
pepwfjgg4#
如果有人发现这个老问题并需要信息，:root通常在示例中用于声明 *CSS自定义属性 * 或“变量”，这些属性或变量在整个文档中可用，例如：
:root { --darkGreen: #051; --myPink: #fce; } section { color: var(--darkGreen); background: var(--myPink); } article h3 { color: var(--darkGreen); }
然而，any element可以用作CSS变量的选择器（不仅仅是:root），因此html或body也可以使页面上的任何元素访问它们。如果有人有使用:root的好理由，我想知道。
html
body
--
$
voj3qocg5#
:root元素是没有父元素的元素，所以我猜HTML中唯一的根元素是<html>元素。因此，当您使用:root选择器来设置样式时，它将设置整个文档的样式。（我在这里找到了更多信息：http://webdesign.about.com/cs/css/qt/tipcsschild.htm和此处：http://www.w3schools.com/cssref/sel_root.asp）的数据。
x4shl7ld6#
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 9+，呈现为MSIE 7）将显示红色文本，大多数其他浏览器将显示蓝色文本。“root”的文档和规范可以在Mozilla开发者网络上找到：https://developer.mozilla.org/en-US/docs/Web/CSS/:root
ldfqzlk87#
:root选择器允许您定位DOM或文档树中最高级别的“父”元素。它在CSS Selectors Level 3 spec中被定义为“结构化伪类”，这意味着它用于根据内容与父内容和同级内容的关系来设置内容的样式。在绝大多数情况下，：root引用网页中的<html>元素。在HTML文档中，html元素总是最高层的父元素，因此:root的行为是可以预测的。然而，由于CSS是一种样式语言，可以与其他文档格式一起使用，如SVG和XML，因此:root伪类在这些情况下可以引用不同的元素。无论使用哪种标记语言，:root总是选择文档树中文档的最顶层元素。
SVG
XML
7条答案
按热度按时间ulmd4ohb1#
在HTML中没有元素 * 称为 * root。html元素本身是“根元素”（这是赋予文档中所有其他元素的祖先的元素的术语），但这将与
html { }匹配。但是，请参阅
:root伪类（带冒号）。cidc1ykv2#
从此处开始：http://www.quirksmode.org/css/root.html
root伪元素选择页面中所有块的根，即初始包含块。在HTML中，这显然是
<html>元素测试样式表：
如果：root选择器正常工作，页面的左列和右列为蓝色，中间的白色列偏移50个像素。
6jjcrrmo3#
root是NetBeans IDE样式表模板中任何元素的占位符。它类似于微积分中的伪变量。请将光标放在y：在
root { display: block; }中删除y：然后输入y。IDE会弹出一个说明窗口，提供有价值的信息。它们将根作为一个伪变量进行处理。例如em {display: inline; }。此外，根是您开始的点，具有分支和叶子的HTML树的最深祖先。因此，在开始时，您有一个默认的框，所有分支和叶都遵循该默认值，除非您将它们的默认显示更改为其他值，例如，内联。pepwfjgg4#
：root可用于声明CSS变量
如果有人发现这个老问题并需要信息，
:root通常在示例中用于声明 *CSS自定义属性 * 或“变量”，这些属性或变量在整个文档中可用，例如：然而，any element可以用作CSS变量的选择器（不仅仅是
:root），因此html或body也可以使页面上的任何元素访问它们。如果有人有使用:root的好理由，我想知道。参考：
--, not$)voj3qocg5#
:root元素是没有父元素的元素，所以我猜HTML中唯一的根元素是<html>元素。因此，当您使用:root选择器来设置样式时，它将设置整个文档的样式。（我在这里找到了更多信息：http://webdesign.about.com/cs/css/qt/tipcsschild.htm和此处：http://www.w3schools.com/cssref/sel_root.asp）的数据。
x4shl7ld6#
root和html之间有一个区别，root伪类是一个CSS3实体，并且不影响旧的浏览器（MSIE 8或更低版本，Opera 9.4或更低版本）
你必须在词根前加一个冒号，如下所示...
如果您同时使用这两个CSS行，MSIE版本8或更低版本（或在兼容模式下运行的MSIE 9+，呈现为MSIE 7）将显示红色文本，大多数其他浏览器将显示蓝色文本。
“root”的文档和规范可以在Mozilla开发者网络上找到：https://developer.mozilla.org/en-US/docs/Web/CSS/:root
ldfqzlk87#
:root选择器允许您定位DOM或文档树中最高级别的“父”元素。它在CSS Selectors Level 3 spec中被定义为“结构化伪类”，这意味着它用于根据内容与父内容和同级内容的关系来设置内容的样式。在绝大多数情况下，：root引用网页中的
<html>元素。在HTML文档中，html元素总是最高层的父元素，因此:root的行为是可以预测的。然而，由于CSS是一种样式语言，可以与其他文档格式一起使用，如SVG和XML，因此:root伪类在这些情况下可以引用不同的元素。无论使用哪种标记语言，:root总是选择文档树中文档的最顶层元素。