Наследование семейства шрифтов с переменной css не работает
Я пытаюсь наследовать глобальное семейство шрифтов в переменной. Однако это не работает.
:root {
--special-font: sans-serif;
}
html {
font-family: serif;
}
.highlight {
font-family: var(--special-font);
}
.special {
--special-font: inherit;
}
/* .special {
--special-font: serif;
} */
/* .special .highlight {
font-family: inherit;
} */<html>
<body>
<div>
<p>
Standard Font: Serif
</p>
<p class = "highlight">
Highlight Font: Sans Serif
</p>
</div>
<div class = "special">
<p class = "highlight">
Special Highlight: should be Serif
</p>
</div>
</body>
</html>Оба закомментированных правила будут работать. Но я бы предпочел не повторяться. Есть ли что-то, что мне не хватает?
Извините за плохой формат кода
@AlexandraBatrak Это был бы обходной путь. Но это неправильно, что переменная не может быть изменена позже. Если я укажу serif вместо inherit в селекторе .special, он будет работать как положено.
Вы правы :D Это работает с .special { --special-font: initial; }
Ответы 1
Разобрался, что происходит, благодаря комментарию, этому вопросу и этому ответу. На самом деле я не устанавливаю переменную так, чтобы она содержала значение inherit, а скорее сообщаю переменной, чтобы она наследовала свое значение.
Чтобы мое семейство шрифтов наследовало шрифт всего документа, я могу установить переменную в initial. Для переменной это пустая строка, тем самым установив для свойства font-family моего абзаца его поведение по умолчанию, то есть inherit.
Когда вы устанавливаете переменную, вы не можете присвоить ей другое значение позже. Создайте 2 переменные, такие как
--standard-fontи--highlight-font, и просто используйте font-family: variable. `:root { --special-font: без засечек; --serif-шрифт: с засечками; } html { семейство шрифтов: var (--serif-font); } .highlight { семейство шрифтов: var (--special-font); } .special .highlight { семейство шрифтов: var (--serif-font); }``