css ：root，html，* 选择器,有什么不同吗？

yws3nbqq 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(143)

这三个CSS规则之间有什么区别吗？

* {
  font-size: 24px
}
:root {
  font-size: 24px
}
html {
  font-size: 24px
}

css

来源：https://stackoverflow.com/questions/60680887/root-html-selector-any-differences

3条答案

按热度按时间

rsl1atfo1#

是的，有区别。下面是一些结果不相同的示例
使用*

* {
  font-size: 24px
}

p {
  font-size:2em;
}

<div>
  <p>some text <span>here</span></p>
</div>

使用html（或:root）

html {
  font-size: 24px
}

p {
  font-size:2em;
}

<div>
  <p>some text <span>here</span></p>
</div>

将font-size应用于所有元素与将font-size应用于html元素并让所有元素继承该值不同。
在第一个示例中，span的font-size等于24px，因为它是由*选择的。在第二个例子中，span将继承p的计算值，因为没有选择器指向它。
在html和:root之间存在一场特异性战争，其中:root将是赢家：

html {
  font-size: 999px;
}

:root {
  font-size:24px;
}

<div>
  <p>some text <span>here</span></p>
</div>

:root {
  font-size:24px;
}

html {
  font-size: 999px;
}

<div>
  <p>some text <span>here</span></p>
</div>

赞(0）回复(0）举报 2023-07-01

ddrv8njm2#

所有这些都会影响你的整个HTML。您甚至可以使用第四个选项，即html * { }，它可以在所有HTML上工作。
它们的含义是：

*表示将选择所有元素-按照CSS * Selector。
:root CSS伪类匹配表示文档的树的根元素。在HTML中，：root表示<html>元素，与选择器html相同，只是它的特异性更高。

你可以从社区获得更多关于这篇文章的例子和信息：How to Apply global font to whole HTML document。
希望这有帮助！

赞(0）回复(0）举报 2023-07-01

cgfeq70w3#

如果我们有这样的东西，所有的 *，：root和html一起如下

*{
  background: green;
}
:root{
backgroud:yellow
}
html{
background:black
}
h1{
background:blue
}

<h1>This is a heading<span>Cow</span></h1>

具体表现为：root（黄色）>html（黑色）>*（绿色）

赞(0）回复(0）举报 2023-07-01

我来回答

css ：root，html，* 选择器,有什么不同吗？

3条答案

相关问题

热门标签

最新问答