有趣的CSS行为re：color inherit和currentColor

Question

说我有以下HTML：

<a id=link1><span>Link 1</span></a>
<a id=link2><span>Link 2</span></a>

以下CSS：

a { color: white; }
a:hover { color: green; }
#link1 span { color: white; }
#link2 span { color: inherit; }
a:hover span { color: currentColor; }

有趣的是，在悬停时，链接1中的span将保持白色，因为它明确设置了color: white，而链接2中的span将变为绿色，就好像color: inherit不足以传递“当前颜色”。

换句话说，currentColor似乎没有拿起inherit指定的颜色。即使我将倒数第二行更改为更具体，也会发生这种情况

#link2 span, #link2:hover span { color: inherit; }

问题：这是预期的行为，还是被视为错误？在Firefox和Chrome中确认。

Fiddle

* { font-family: 'trebuchet ms'; }
code { color: #c00; font-family: 'courier new'; font-size: .95em; }
a { display: block; color: white; background: black; padding: 1rem; margin: 1rem; cursor: pointer; text-align: center; }
a:hover { color: green; }
#link1 span { color: white; }
#link2 span { color: inherit; }
a:hover span { color: currentColor; }

<p>On hover to link 1, the <code>span</code> inside stays white because it has <code>color: white</code> explicitly set, and this is picked up as its <code>currentColor</code></p>
<a id=link1><span>link 1 (I stay white)</span></a>
<p>The <code>span</code> inside link 2, however, has <code>color: inherit</code> set, inheriting the parent <code>a</code>'s <code>color: white</code> definition. This, it seems, is insufficient for white to be picked up as its <code>currentColor</code> on hover to the <code>a</code>, and so it goes green due to the rule <code>a:hover { color: green; }</code>.</p>
<a id=link2><span>link 2 (I go green)</span></a>

Answer 1

如果使用currentColor作为color属性的值，则它将从color属性的继承值中获取其值。 MDN

一方面我们有上述事实，但在这里我们有CSS specificity在玩：

#link1 span和#link2 span比a:hover span更具特异性 - 因此这个CSS规则中指定的值将优先。

这将继承父母的绿色：

#link2 span {
    color: inherit;
}

继承始终来自文档树中的父元素，即使父元素不是包含块也是如此。 MDN

这将设置白色：

#link1 span {
    color: white;
}

Answer 2

这是设计的，你可以通过交换inherit currentColor来判断。 spec says：

currentColor：'color'属性的值。 'currentColor'关键字的使用值是'color'属性的计算值。如果在'color'属性上设置'currentColor'关键字，则将其视为'color：inherit'。

color财产有一个特例，你遇到过这个问题。所以它正确地从计算属性获取green并保留它。

body { background: black; }
a { display: block; color: white; padding: 1rem; margin: 1rem; text-align: center; cursor: pointer; }
a:hover { color: green; }
#link1 span { color: white; }
#link2 span { color: inherit; }
a:hover span { color: currentColor; }
#link2:hover span { color: currentColor; }
#link3:hover span { color: inherit; }

<a id="link1"><span>link 1 (I stay white)</span></a>
<a id="link2"><span>link 2 (I go green w/ currentColor)</span></a>
<a id="link3"><span>link 3 (I go green w/ inherit)</span></a>