Как заставить DIV наследовать значение «em» от родителя его родителя

Question

Все мы знаем, что значение em в эластичном макете для данного объекта относительно родительского объекта, например:

<div id="div1" style="font-size:1em;">
<p>Hello</p>
<div id="div2" style="font-size:0.5em;">
<p>Hello</p>
<div id="div3" style="font-size:0.5em;">
<p>Hello</p>
</div>
</div>
</div>

Но возможно ли сделать подчиненный DIV "сбросить это значение em или получить его значение от родительского элемента выше по цепочке?

По сути, у меня есть несколько вложенных DIV, и я хочу, чтобы один из внутренних использовал собственное значение em документа.Использование 1em бесполезно, так как один из родителей DIV уже использует дробное значение.

Заранее спасибо

Симон

Answer 1

Обновление : Поскольку этот ответ был изначально написан, в CSS был добавлен новый модуль.

rem является root em и является:

равно вычисленному значению font-size для корневого элемента.

Это «собственное значение em документа».

---

Нет, это не так. размеры шрифта, установленные с помощью единицы em, явно относятся к font-size родительского элемента.

Самое близкое, что вы можете получить, это знать все изменения и учитывать это при расчете.

например. так как # div2 имеет размер шрифта 0.5em, для того, чтобы # div3 имел тот же размер шрифта, что и # div1, вам нужно установить font-size: 2em

Другие длины (со значениями width) относятся к размеру шрифта текущего элемента, и вам придется выполнить аналогичные вычисления для них.

Answer 2

Возможно, вы захотите пересмотреть использование классов CSS вместо стилей, так как это решит вашу проблему.Есть ли причина, по которой вы используете стиль вместо CSS-класса?

<div id="div1">
<p class="font1em">Hello</p>
<div id="div2">
<p class="fonthalfem">Hello</p>
<div id="div3">
<p class="fonthalfem">Hello</p>
</div>
</div>
</div>