更改列表中嵌套元素的字体大小答案

【问题标题】：change font-size of nested elements in list更改列表中嵌套元素的字体大小
【发布时间】：2011-02-13 17:37:10
【问题描述】：

我有一个 ul 元素的嵌套列表。我想将每个级别的字体大小减小几个像素。

例如，第一个 li 元素的字体大小为 18px，然后其嵌套元素的字体大小为 16px，任何嵌套元素的字体大小为 14px 等。但是，一旦字体大小达到一定大小，例如8px 我不想再让它们变小了。

这些列表是动态生成的，所以我无法知道它们的深度，所以不能将 css 硬编码到某个级别。在 css 或 JQuery 中有没有一种方法可以应用这种类型的格式？

【问题讨论】：

【解决方案1】：

li { font-size: 90%; }

第一个 li 将获得 90%，嵌套在其下方的一个将获得 90% 的 90%，依此类推。

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

…在 4 级后停止。

【讨论】：

【解决方案2】：

您可以以百分比形式定义将层叠的字体大小：

li { font-size: 90%; }

编辑：

我想那么手动定义四个级别会更好：

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。

【讨论】：