有趣的CSS行为:颜色继承和currentColor

时间:2019-02-28 17:37:44

标签: html css css-selectors

说我有以下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>

2 个答案:

答案 0 :(得分:2)

  

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

一方面,我们有上述事实,但在这里,我们正在使用CSS specificity

#link1 span#link2 span特异性a:hover span多-因此,此CSS规则中指定的值将优先。

这将继承父母的绿色颜色:

#link2 span {
    color: inherit;
}
  

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

这将设置白色颜色:

#link1 span {
    color: white;
}

答案 1 :(得分:0)

这是设计好的,您可以通过将inherit换成currentColor来判断。 spec says

  

currentColor:“ color”属性的值。 “ currentColor”关键字的使用值是“ color”属性的计算值。 如果在“颜色”属性本身上设置了“ currentColor”关键字,则将其视为“颜色:继承”。

您遇到的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>