Интересное поведение CSS: цветное наследование и текущий цвет

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; }

Что интересно, при наведении указатель span в ссылке 1 останетсябелый, потому что в нем явно установлено значение color: white, тогда как span в ссылке 2 станет зеленым, как будто 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

Это как задумано, и вы можете сказать, поменяв inherit на currentColor.Спецификация говорит :

currentColor: значение свойства 'color'.Используемое значение ключевого слова currentColor является вычисленным значением свойства color. Если ключевое слово 'currentColor' установлено в самом свойстве 'color', оно рассматривается как 'color: наследовать'.

Для 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>

Answer 2

Если currentColor используется в качестве значения свойства color, он вместо этого берет свое значение из унаследованного значения свойства color. MDN

С одной стороны, у нас есть вышеуказанный факт, но здесь мы имеем CSS специфичность в игре:

#link1 span и#link2 span имеет * специфичность , чем a:hover span - поэтому значения, указанные в этом правиле CSS, будут иметь приоритет.

Это унаследует родительский зеленый color:

#link2 span {
    color: inherit;
}

Наследование всегда происходит от родительского элемента в дереве документа, даже если родительский элемент не является содержащим блоком. MDN

И это установит белый цвет:

#link1 span {
    color: white;
}