代码之家 › 专栏 › 技术社区 › jeroen

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

netbeans css html

jeroen · 技术社区 · 14 年前

我最近才开始使用NetBeansIDE(6.9.1),并使用它向正在进行的站点添加样式表。

令我惊讶的是,自动添加了一个元素:

root { 
    display: block;
}

环顾四周,我可以找到一些关于 :root 伪类,但与 root 元素本身。

什么是元素,它有什么用处吗?

6 回复 | 直到 5 年前

Quentin 10 年前

没有元素 打电话 在HTML中生根。HTML元素本身是“根元素”(这是赋予元素的术语,该元素是文档中所有其他元素的祖先),但这将与 html { } .

然而,见 the :root pseudo-class (用冒号)。

jball 14 年前

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

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

测试样式表:

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

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

peter jones 13 年前

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

Dave Everitt 6 年前

:root可用于声明css变量

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

:root {
  --darkGreen: #051;
  --myPink: #fce;
}

section {
  color: var(--darkGreen);
  background: var(--myPink);
}

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

然而, 任何元素 可以用作CSS变量的选择器(不仅仅是 根 如此 html 或 body 还将启用页面上的任何元素来访问它们。如果有人有充分的理由使用 根 我想知道。

参考文献:

mariamtin 12 年前

这个 :root 元素是没有父元素的元素,因此我猜HTML中唯一的根元素是 <html> 元素… 所以当你使用 根 选择器为“样式”,它将为整个文档设置样式。

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

Jeff Clayton 10 年前

根和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)将显示红色文本,大多数其他浏览器将显示蓝色文本。

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