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

Question

我有一個嵌套的ul元素列表。我想將每個級別的字體大小減少幾個像素。

因此，例如，第一個li元素的字體大小爲18px，那麼嵌套元素的字體大小爲16px，並且任何嵌套元素的字體大小爲14px等。但是，一旦字體大小達到一定大小例如8px我想停止讓它們變小。

這些列表在飛行中生成，所以我無法知道它們會變得如此之深，所以不能只是將css硬編碼到某個級別。有沒有一種方法在CSS或JQuery中我可以應用這種類型的格式？

Answer 1

您可以定義字體大小以百分比爲單位，將級聯：

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。

Answer 2

li { font-size: 90%; } 

第一個li將獲得90％，一個嵌套在90％以下的90％之下，等等。

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

...停止4級後。