css :root,html,* 选择器,有什么不同吗?

yws3nbqq  于 2023-07-01  发布在  其他
关注(0)|答案(3)|浏览(142)

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

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

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>
ddrv8njm

ddrv8njm2#

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

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

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

cgfeq70w

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(黑色)>*(绿色)

相关问题