Изменение пользовательского свойства CSS для унаследованного (цветного) значения не работает

У меня есть этот пример ниже, где .bar наследует color: var(--color); от своего родителя.

Если затем я переопределю --color на другой цвет в .bar, пользовательское свойство не обновится.

Может ли кто-нибудь объяснить, почему и что необходимо для изменения значения --color в дочерних элементах, которые наследуют это пользовательское свойство?

:root {
  --color: red;
  --color2: blue;
}

.foo {
  color: var(--color);
}

.bar {
  --color: var(--color2);
}
<div class="foo">
  foo
  <div class="bar">
    bar
  </div>
</div>


css css-variables
person Michael Coker    schedule 30.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Свойство правильно переопределено, но пока вы не установите свойство color, элемент .bar наследует цвет от своего родителя, и в области родителя этот цвет красный.

:root {
  --color: red;
  --color2: blue;
}

.foo {
  color: var(--color);
}

.bar {
  --color: var(--color2);
  color: var(--color);
}
<div class="foo">
  foo
  <div class="bar">
    bar
  </div>
</div>

person Fabrizio Calderan    schedule 30.01.2019
comment
Спасибо! Знаете, почему это не работает? Я предполагаю, что это сделано по дизайну, но я ожидаю, что изменение переменной будет отражено в цвете дочернего элемента путем переопределения значения переменной. Забавно, в Safari, если вы проверяете .bar, а затем прокручиваете до .foo в инструментах разработки, переменная --color возвращает blue. - person Michael Coker; 30.01.2019
comment
Пожалуйста, прочитайте еще раз объяснение. Вы переопределяете переменную, но не используете ее - person Fabrizio Calderan; 30.01.2019
comment
@MichaelCoker, вы должны думать о CSS, а не о C ++ ... у вас есть каскад, переменная уже оценивается на верхнем уровне, и она не будет оцениваться снова ... прочитайте дубликат, и вы получите более подробный пример и соответствующую часть спецификация - person Temani Afif; 30.01.2019