CSS中的默认颜色答案

【问题标题】：Default Color in CSSCSS中的默认颜色
【发布时间】：2021-03-05 05:00:22
【问题描述】：

对此很陌生。假设在我的 CSS 文件中定义以下内容（没有 color 属性）

.time {
    border: 1px solid #666666;
    background: #555555;
    text-align: center;
    cursor: pointer;
    transition: all linear 0.3s;
    padding: 1px 2px;
    font-size: .8em;
}

然后像这样使用它

<div class="time" ...

文字颜色从何而来？是否有默认值，是否使用上一个标签中定义的 on，...？

【问题讨论】：

stackoverflow.com/questions/62407333/…
有什么地方可以配置吗？我要问的原因是我们必须将上述代码部署到环境中，其中一个文本是白色的，另一个文本是黑色的。

标签： html css colors

【解决方案1】：

这种情况有3种情况：

如果父项已定义颜色，它将采用父项的第一种颜色
如果父级没有定义颜色，那么它将采用body 或html 颜色
如果html 和body 元素之后没有定义颜色，它将采用浏览器默认颜色。

【讨论】：

没有。如果父元素没有定义颜色，浏览器将向上遍历 HTML 元素树，直到找到具有定义颜色的元素。这是因为color 是一个继承属性。 <html> 始终具有定义的颜色，因为这是浏览器设置可继承 CSS 属性的目标。

【解决方案2】：

这有两个部分：

某些 CSS 属性是从其父级继承的。 color 就是其中之一。从技术上讲，inherit 是 color 的默认值。
浏览器定义了各种初始值。 color 的初始值通常通过浏览器内部 CSS 样式表设置在 <html> 元素上，并且可能因浏览器而异，但通常是黑色、类似于黑色的颜色或设计用于与默认背景颜色形成对比（例如在深色模式下）。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/color

请注意，我的描述在技术上并非 100% 准确，但非常接近。 color 已经存在很长时间了，多年来也继承了一些包袱。

【讨论】：

【解决方案3】：

你可以的

body {
 color: "white"
}

将白色更改为您想要的任何颜色。

如果你想在特定标签中覆盖，你可以像.time类一样在类中设置它。

【讨论】：