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

Question

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

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

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

Answer 1

li { font-size: 90%; }

第一个li将获得90％，一个嵌套在90％以下，90％将获得90％，等等。

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

......在4个级别后停止。

Answer 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。