:root, html, * 选择器。有什么不同吗？答案

【问题标题】：:root, html, * selector. Any differences?:root, html, * 选择器。有什么不同吗？
【发布时间】：2020-03-14 08:07:37
【问题描述】：

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

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

【问题讨论】：

标签： css

【解决方案1】：

是的，有区别。下面是一些结果不一样的例子

使用*

* {
  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>

【讨论】：

【解决方案2】：

所有这些都会影响您的整个 HTML。您甚至可以使用第四个选项，即html * { }，它将适用于您的所有 HTML。

它们的含义是：

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

您可以从社区获得有关此帖子的更多示例和信息：How to Apply global font to whole HTML document。

希望这会有所帮助！

【讨论】：