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

Question

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

我刚刚开始使用NetBeans IDE(6.9.1),并使用它在我的站点中添加样式表.

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

root { 
    display: block;
}

Run Code Online (Sandbox Code Playgroud)

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

什么是root元素,它有什么用？

Answer 1

Dav*_*vid 13

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

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

测试样式表:

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

Run Code Online (Sandbox Code Playgroud)

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

谢谢,这也是我发现的,但我想知道NetBeans插入的`root`元素,而不是伪元素. (2认同)
由于没有这样的html标签,并且它似乎没有记录在我可以找到的任何地方,我会猜测它是作为示例代码向您展示css应该如何寻找新手.我只能在模板中告诉你,你可以自己编辑模板,如果你不喜欢它在"工具 - 模板"下,然后转到"Web"文件夹.我不认为这是一个"错误",因为它显然是故意的.更像是"无证无用的功能". (2认同)

Answer 2

pet*_*nes 11

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

令人惊讶的是，这是真正_回答问题_的唯一答案。所有其他人都将“root”读为“：root”，该问题并未询问这一点。 (2认同)

Answer 3

Que*_*tin 10

HTML中没有名为 root的元素.html元素本身就是"根元素"(它是赋予元素的术语,它是文档中所有其他元素的祖先),但这将匹配html { }.

然而,看到的:root伪类(以冒号).

Answer 4

Dav*_*itt 6

:root可用于声明CSS变量

如果有人发现这个旧问题并需要这些信息,:root通常会在示例中使用它来声明整个文档中可用的CSS自定义属性或"变量",例如:

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

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

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

Run Code Online (Sandbox Code Playgroud)

但是,任何元素都可以用作CSS变量的选择器(不仅仅是:root),html或者body也可以使页面上的任何元素都可以访问它们.如果有人有充分的理由使用:root,我想知道.

参考文献:

`:root` 伪元素比 `html` 元素具有更高的特异性，因此，最好将 CSS 变量设置在 `:root` 内部，即全局且位于 `html` 元素之上 - 这样做是为了一般卫生越过级联。否则，是的，“html”和“body”元素都会将变量沿着树传递，正如您所正确指出的那样。 (3认同)
*“:root 伪元素具有更高的特异性”*这不应该读作*较低的*特异性吗？那么“html”上设置的变量会否决“:root”上设置的变量？ (2认同)
不符合 [CSS 技巧](https://css-tricks.com/almanac/selectors/r/root/#points-of-interest)。 (2认同)

归档时间：	15 年，10 月前
查看次数：	21675 次
最近记录：	7 年，7 月前