为什么锚元素的 `color:initial` 将其颜色设置为黑色而不是蓝色？答案

【问题标题】：Why does `color:initial` for an anchor element set its color to black instead of blue?为什么锚元素的 `color:initial` 将其颜色设置为黑色而不是蓝色？
【发布时间】：2019-09-09 16:08:03
【问题描述】：

根据MDN - Cascade and inheritanceinitial的值

将应用于选定元素的属性值设置为与浏览器默认样式表中该元素的该属性设置的值相同

所有主流浏览器中锚元素的默认颜色都是蓝色。例如，Chrome 的默认样式表为锚元素定义了以下样式：

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: pointer;
}

-webkit-link 解析为蓝色。

鉴于此，我希望在使用 color: initial 时锚元素的文本为蓝色。但取而代之的是黑色。为什么？

经过一番调查，我发现 MDN 与 here 写的自相矛盾

初始值不应与浏览器样式表指定的值混淆。

我很困惑。哪种说法是正确的？

如果后者为真，我在哪里可以找到不同浏览器的元素初始值？为什么初始值应该不同于浏览器样式表中指定的值？

【问题讨论】：

这里是官方规范，您不会感到困惑：w3.org/TR/css-cascade-3/#initial-value
@TemaniAfif 感谢您的回复。我已经阅读了该规范，并且我喜欢该描述非常简洁明了。
color 尤其令人困惑，因为初始颜色“取决于用户代理”。但这与在用户代理样式表中定义的不同。这意味着用户代理应该使用适合输出设备的初始颜色。对于现代 LCD 显示器，它可能是黑色的，但用户可能会将其配置为不同的颜色。它不依赖于元素类型，或者它的属性或状态。用户代理上的所有文本都将具有相同的初始颜色。
相关：stackoverflow.com/questions/61458563

标签： html css browser

【解决方案1】：

好问题！我想你在 MDN 上发现了一个错误，我已经更正了。让我们试着解释一下到底发生了什么。

根据spec，initial 的值是指该属性的“初始值”。

如果一个属性的级联值是初始关键字，那么该属性的指定值就是它的初始值。

根据spec，属性的初始值是预定义的默认值。

每个属性都有一个初始值，在属性的定义表中定义。如果属性不是继承属性，并且级联没有产生值，那么属性的指定值就是它的初始值。

因此，每个属性都有一个默认值，称为“初始值”，由规范强制执行。初始值不取决于浏览器^*。该规范在其定义表中列出了属性的初始值，请参阅property index。旧版本的规范维护了一个单独的列表，请参阅 property table。

例如，margin 的初始值为 0。或者color 的初始值为black ^*。

如果属性的值没有在级联中设置（并且通过继承），那么它将采用这个初始值。但是，重要的是要理解，如果您不设置属性，并不意味着级联不会产生值。

浏览器有一个样式表，它适用于每个文档。此样式表的优先级低于您的样式表，因此仅在您不覆盖它时才适用。它为属性设置的值可以是任何值，就像样式表中的值一样。浏览器样式表就像您的样式表，但不是您创作的，从未见过，只是被神奇地应用，对您不可见。要查找浏览器样式表，请参阅How can I locate the default style sheet for a browser?

如果您没有为属性添加指定值，但浏览器样式表会添加，那么对于您来说，这似乎是初始值，但实际上并非如此！这确实非常令人困惑！它使浏览器样式表中的值看起来像初始值，而实际上它们不是。当使用值initial 时可以注意到这种细微的差异，它将属性设置回初始值。你可以认为它删除了浏览器样式表中的值。

我认为在这一点上浏览器包含浏览器样式表的想法是否是一个好主意值得怀疑。在早期，它显然使创建网页变得更简单，因为作者不需要做任何样式。但是现在作者自定义了他们网页的样式，并且不再有合理的默认样式了。作者也不希望他们的文档在不同的浏览器中看起来不同。浏览器不可见的默认样式只是另一个隐藏的错误来源。

对于锚元素，浏览器样式表将颜色设置为蓝色（如果它具有href 属性）。这看起来好像blue 是锚元素的颜色属性的初始值。但实际上color属性的初始值是黑色，设置值initial时就看到了。只是浏览器样式表“为您”设置了锚元素的样式，而您不会注意到。

请注意，初始值是属性的特征。它不关心元素。对于一个元素或另一个元素，它不能有所不同。浏览器样式表可以选择仅为某些元素或某些条件设置属性样式，就像您自己的样式表一样。这会使属性的初始值在不同的元素或条件下看起来不同，而实际上并非如此。

例如，浏览器样式表为锚元素blue 着色（如果它具有href 属性），而不是段落元素。对不同元素具有不同值的属性表明浏览器样式表正在发挥作用。

¹一些属性（包括color）状态

初始：取决于用户代理

但这并不意味着使用了用户代理样式表！而是初始值

[..] 取决于 [用户代理] 的首选项设置等内容

（见CSS: The Definitive Guide: Visual Presentation for the Web）

例如，Firefox 允许在设置中为 color、background-color、font-family、font-size 等属性指定初始值。

虽然，令人困惑的是，相同的设置也允许为浏览器样式表设置属性，例如链接颜色。这是可以推断的，因为这些值只适用于某些元素，而初始值需要适用于属性存在的每个元素。

【讨论】：

【解决方案2】：

我在 MDN 中看到了完全相同的内容，请查看此内容。

“注意：在继承的属性上，初始值可能是意外的。您应该考虑使用 inherit、unset 或 revert 关键字。” https://developer.mozilla.org/en-US/docs/Web/CSS/initial。

由于颜色是一个继承属性...基本上，不要相信“初始”值。我看到链接的颜色是紫色的，与访问时的颜色相同，你看到它是黑色的......

【讨论】：