CSS：* vs :root vs html vs body。为字体大小、字体系列设置默认值的标准做法是什么？ [关闭]答案

【问题标题】：CSS: * vs :root vs html vs body. What is the standard practice for setting defaults for font-size, font-family? [closed]CSS：* vs :root vs html vs body。为字体大小、字体系列设置默认值的标准做法是什么？ [关闭]
【发布时间】：2021-11-05 19:05:42
【问题描述】：

我一直在尝试找出 在我的 CSS 中设置“默认值”（例如字体大小、字体系列）的位置。

我见过它们最常放置在这些区域：

*（通用选择器）
:root
html
body

是否有一个可靠的标准做法来解决我遇到的问题？

提前谢谢你！

更新：

(1)我花了一两个小时messing around with them on this pen on CodePen，最终发现CSS 特异性与我预期的不同：

特异性： * > body > :root > html

我之前知道* 是最不具体的（fun visual reference of CSS specificity here），所以我惊讶地发现它优先于其他标签。（欢迎解释！）

(2)此外，我发现了一些例外情况：

例外：

body > * 仅用于“非标记”文本（HTML 文档中 <body> 元素内的文本，但不是任何其他元素的后代）
- （此处* 仍优先于:root 或html）
如果* 将字体大小设置为百分比（例如字体大小：100%），它将继承并应用到其他三个标签的字体大小中的任何一个，具有以下优先级：@987654340 @ > :root > html

(3) 最后，我发现了一些我认为值得分享的值得注意的信息：

重要信息：

仅* 样式“用户界面”元素（例如input、textarea、button、select、...更多？）
- 更新：如果您 (1) 将它们的属性设置为“继承”，并且 (2) 它们不是任何其他样式元素的后代（否则，他们将继承这些样式，而不是body/:root/html)。
* 样式化“用户界面”元素的范围因浏览器而异
- 例如，在 Chrome 上，* 将设置 select 元素的 font-size/font-family/color 样式。在 Safari 上，* 只会设置select 元素的字体大小（但是，即使是直接的select 标记本身也是如此……奇怪。）
- 更新：在 Safari 上，* 和直接的 select 标记将完全设置 select 元素的样式，但前提是您也通过更改边框或背景属性“破坏”样式（其他属性可以也可能导致这种情况）。如果您尝试仅更改颜色或填充（可能还有其他属性），则更改将不会应用，直到您通过更改前面提到的属性值之一来“破坏”它。奇怪。
input 的占位符文本使用 * 设置样式，但字体颜色仍为灰色（我猜是不是 'color' 的占位符属性导致了这种情况？）

帖子结束：

根据我从实验(do your own experimentation with my CodePen here) 中学到的知识，我提出了我目前关于设置CSS“默认值”的最佳位置的个人想法（我将在下面给出我的答案)，但我很想看看其他人要说什么。我对编码还是很陌生，我相信在这方面还有一些更深入的学习要做！

【问题讨论】：

标签： html css root font-size document-body

【解决方案1】：

我目前对 CSS“默认”样式最佳实践的想法，以获得一致的用户体验：

注意：这些是基于我从实验中学到的（参见上述问题中的更新），并且会随着进一步的学习而改变。 p>

注意 #2：我使用“默认”这个词可能有点过于宽松，并且应该严格遵守继承的 CSS 属性（例如字体大小、字体系列、颜色），而不是而不是从更实际的角度考虑设置一个整体模板（例如，我如何谈论在body 中设置“默认”背景，而不是在* 中——参见下面的#2。） p>

注意 #3 (10/6/21)：这里的思想和知识肯定有错误，现在我学到了更多，还有一些想法/概念我想再次访问如果我有时间的话，我将把这篇文章留在这里。

在* 或body 中设置继承的“默认值”（例如字体大小、字体系列）。
- 请勿在:root/html 中设置它们，以免被body 覆盖。
- 对于“未标记”文本，我们不必担心body 优先于* 的单一例外，因为所有文本都可能是某个元素的后代。（如果不是，可能重新评估您的标记？）
无论是在* 还是body 中设置继承的“默认值”，很可能大多数其他非继承的、面向模板的“默认值”不应设置在* 中（例如背景） , 而应该设置在body。
- 设置“默认”背景，正如这里所说的，只是指所显示的 HTML 元素的“最靠后”背景（这是面向模板的想法；背景属性不是继承的）。将其设置为 * 不会产生预期的结果，因为所有元素的背景都会被设置/覆盖（例如 button、textarea、div 等）。
- 不要将它们设置在 :root 或 html 中，原因在 #1 中提到。
无论是在* 还是body 中设置继承的“默认值”，您还应该根据需要通过其标签明确设置“用户界面”元素的默认样式。
- 如果将body 用于继承的“默认值”：必须明确设置所有“用户界面”元素。
- 如果将* 用于继承的“默认值”：检查跨浏览器的“用户界面”元素样式的一致性以确定哪些需要显式设置。
  - 至少必须明确设置 select 元素，因为 Safari（请参阅上述问题中的 NOTABLE INFO）。
- 另外，不要忘记，您显然可能需要对样式进行“破坏性”更改才能在某些浏览器的某些“用户界面”元素上生效（例如，再次在 Safari 上使用 select 元素。参见 上述问题中的重要信息）。
使用 :root 定义全局 CSS 变量（仅此而已？）。
将html 用于...（不确定？什么都没有？）

【讨论】：

您好，感谢您为此所做的所有工作，但有些地方我不明白。例如在 #2 setting background in body 下没有设置默认值，因为背景不是继承的。它只是为任何身体元素设置背景。 * 为所有元素设置它。也许您对默认一词的使用可能有一些解释，因为它似乎与我的理解不同。
嘿@AHaworth。我承认，我在这里使用的词相当宽大。当我说“默认值”时，我实质上是在考虑为其余显示的 HTML 元素（也就是 body 标记中的任何内容）设置一个基本模板或基础以放在上面。我认为在实践中将所有元素的背景（使用*）设置为某种颜色是不寻常的，尽管我承认这将是设置“默认”的一个更真实的例子，严格定义这个词默认。
@AHaworth 由于设置“默认值”最终与继承的属性有关，我可能应该删除该部分。
@AHaworth 我现在决定只进行一些编辑以使其更加清晰，而不是删除该部分，因为我认为它仍然提供了一些价值。

【解决方案2】：

来吧，伙计！默认值是默认值。你为什么不试试css？

html{
    font-size: 20px !important;
}

这就是我通常做的。

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。