изменить размер шрифта вложенных элементов в списке

Question

У меня есть вложенный список элементов ul. Я хотел бы уменьшить размер шрифта на пару пикселей для каждого уровня вниз.

Так, например, первые элементы li будут иметь размер шрифта 18px, затем вложенные элементы этого будут иметь размер шрифта 16px, а любые вложенные элементы этого будут иметь размер шрифта 14px и т. Д. Однако, как только размер шрифта достигнет определенного размера, например, 8px Я бы хотел перестать делать их меньше.

Эти списки создаются на лету, поэтому я не знаю, насколько они глубоки, поэтому не могу просто жестко закодировать CSS до определенного уровня. Есть ли способ в CSS или JQuery, где я мог бы применить этот тип форматирования?

Answer 1

li { font-size: 90%; }

Первый li получит 90%, один вложенный ниже, который получит 90% 90% и т.

li li li li { font-size: 100%; } 

… чтобы остановиться после 4 уровней.

Answer 2

Вы можете определить размер шрифта в процентах, который будет каскадно:

li { font-size: 90%; }

EDIT:

Полагаю, тогда было бы лучше определить четыре уровня вручную:

li { font-size: 16px }
li li { font-size: 14px }
li li li { font-size: 12px }
li li li li { font-size: 10px }
li li li li li { font-size: 8px }

Кстати, имейте в виду, что некоторые браузеры позволяют пользователю определять минимальный размер шрифта. У меня, например, установлено 12px.