说我有以下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中确认。
* { 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>
答案 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>