Manuel Asked: 2020-12-03 07:19:14 +0800 CST 2020-12-03 07:19:14 +0800 CST 2020-12-03 07:19:14 +0800 CST :root 和 html 选择器的区别 772 我不太清楚何时使用一个或另一个选择器,或者它们是否真的有明显的区别,我是否按照我认为合适的方式使用它们?或者根据一些具体的用途。 html 3 Answers Voted Best Answer BetaM 2020-12-03T08:11:13+08:002020-12-03T08:11:13+08:00 根据规范1 伪root类代表文档的根,在 HTML 文档中它代表标签<html></html> 示例 1 您可以看到在没有明确定位 HTML 标记的情况下,使用该伪类如何将背景颜色应用于整个文档;也就是说,我寻找最高级别的元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Ejemplo 1</title> <style> :root{ background: tomato; } </style> </head> <body> </body> </html> 示例 2 观察一下,基于特异性的问题,在下面的片段中,虽然html标签的红色应该通过级联的方式应用,但伪类的番茄色被忽略并保留:root,因为它具有更高的特异性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Ejemplo 2</title> <style> :root{ background: tomato; } html{ background: red; } </style> </head> <body> </body> </html> 您可以在下图中查看上述内容,从中可以看到浏览器如何取消标签的样式,html只保留root之前暴露的样式。 提到了特异性问题,因为它是浏览器确定哪些样式比其他样式具有更大权重或应用相关性的方法;也就是说,正如我们在 Mozilla Developer 2文档中所读到的那样;顺序是这样的: Elemento Nivel etiquetas 0 clases, de atributos y pesudoclases 1 selectores de id 2 因此,如您所见,在这种情况下使用伪类比 :root使用标签<html>本身更具体。 参考 1 伪类:root 2 特异性水平 LPZadkiel 2020-12-03T08:09:13+08:002020-12-03T08:09:13+08:00 :root是一个伪类,指的是页面的根,而选择器html指的是页面的html标签,这个标签是页面的基本标签,所以我们可以说它们指的是同一个东西,但它们有区别换句话说,“特异性”在选择我使用其中一种或另一种时坚持的样式定义时具有不同的“权重”,示例如下: 通常当我们分配 css 样式时,解释器会坚持我们定义的最后一个样式。例如,我们有两个 div 对象,它们的样式在两个地方发生了变化,但解释器保留了最后一个定义 .div1 { background-color: red; } .div1 { background-color: blue; } .div2 { background-color: blue; } .div2 { background-color: red; } <div class="div1"> div 1 </div> <div class="div2"> div 2 </div> 然而,这对于选择器来说是不一样的:root,html因为它:root有更多的“权重”,所以它不能被选择器覆盖html html { background: red; } :root { background: blue; } 不管顺序... :root { background: blue; } html { background: red; } jjjj 2020-12-03T07:24:47+08:002020-12-03T07:24:47+08:00 嗨,我会告诉你 :root 和 html 的意思是一样的。但是你有一个“不同的特异性”, :root “具有更高的特异性值”,所以如果我们从 DOM 中选择元素,请注意。
根据规范1
伪
root
类代表文档的根,在 HTML 文档中它代表标签<html></html>
示例 1
您可以看到在没有明确定位 HTML 标记的情况下,使用该伪类如何将背景颜色应用于整个文档;也就是说,我寻找最高级别的元素
示例 2
观察一下,基于特异性的问题,在下面的片段中,虽然html标签的红色应该通过级联的方式应用,但伪类的番茄色被忽略并保留
:root
,因为它具有更高的特异性您可以在下图中查看上述内容,从中可以看到浏览器如何取消标签的样式,
html
只保留root
之前暴露的样式。提到了特异性问题,因为它是浏览器确定哪些样式比其他样式具有更大权重或应用相关性的方法;也就是说,正如我们在 Mozilla Developer 2文档中所读到的那样;顺序是这样的:
因此,如您所见,在这种情况下使用伪类比
:root
使用标签<html>
本身更具体。参考
:root
:root
是一个伪类,指的是页面的根,而选择器html
指的是页面的html标签,这个标签是页面的基本标签,所以我们可以说它们指的是同一个东西,但它们有区别换句话说,“特异性”在选择我使用其中一种或另一种时坚持的样式定义时具有不同的“权重”,示例如下:通常当我们分配 css 样式时,解释器会坚持我们定义的最后一个样式。例如,我们有两个 div 对象,它们的样式在两个地方发生了变化,但解释器保留了最后一个定义
然而,这对于选择器来说是不一样的
:root
,html
因为它:root
有更多的“权重”,所以它不能被选择器覆盖html
不管顺序...
嗨,我会告诉你 :root 和 html 的意思是一样的。但是你有一个“不同的特异性”, :root “具有更高的特异性值”,所以如果我们从 DOM 中选择元素,请注意。