CSS嵌套計數是一種非常有用的技巧，它可以幫助我們對網頁進行更精細的排版，讓頁面更加美觀、易讀。嵌套計數的基本原理是利用CSS的“計數器”功能，為不同的元素或元素組設置不同的計數器，然后通過CSS的嵌套選擇器將計數器的值進行相互傳遞。

/* 定義計數器 */
body {
counter-reset: section; /* 定義計數器名和初值 */
}
h1::before {
counter-increment: section; /* 每遇到h1元素計數器加1 */
content: "Section " counter(section) ": "; /* 在標題前輸出計數器值 */
}
p::before {
counter-increment: section; /* 每遇到p元素計數器加1 */
content: counter(section) ". "; /* 在段落前輸出計數器值 */
}
/* 嵌套選擇器使用計數器 */
div ol {
counter-reset: subsection; /* 定義子計數器，初值為0 */
}
div li::before {
counter-increment: subsection; /* 每遇到li元素子計數器加1 */
content: counter(section) "." counter(subsection) " "; /* 在列表項前輸出計數器值 */
}

在上述代碼中，我們使用了CSS的counter-reset和counter-increment屬性來定義計數器和控制計數器的遞增。其中counter-reset用于定義計數器的名稱和初值，counter-increment用于指定計數器的遞增方式和遞增的值。

然后，我們使用::before偽元素在標題和段落前插入內容，并在其中引用計數器的值。最后，我們使用嵌套選擇器為列表項單獨定義一個子計數器，并在列表項前插入子計數器和父計數器的值。

使用CSS嵌套計數，我們可以實現各種復雜的排版效果，如為論文中的章節、子章節、小節等不同級別的標題編排不同的編號，或為代碼中的行數、注釋、函數等不同類型的元素添加序號等。同時，它也能讓我們的代碼更加優雅簡潔，減少了大量手動計數的工作。