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

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%; }

编辑:

我想那时手动定义四个级别会更好:

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.