在網站開發中，樹狀結構是經常使用的一種設計方式，能夠有效地組織內容并增加用戶交互。CSS無限樹是一種使用CSS實現的樹狀結構，它具有可擴展性和靈活性，在不同的場景下都能夠很好地應用。

/* CSS無限樹的基本結構 */
.tree {
margin: 0;
padding: 0;
list-style: none;
position: relative;
/* 指定根列表項的樣式 */
.tree__item {
display: flex;
margin: 0;
padding: 0;
cursor: pointer;
/* 定義根列表項的樣式 */
&.tree__item--root {
font-weight: bold
}
}
/* 定義子節點列表的樣式 */
.tree__sub {
position: absolute;
top: 100%;
left: 0;
opacity: 0;
visibility: hidden;
/* 定義子節點列表的樣式 */
.tree__item {
display: block;
/* 子節點之間的間距 */
& + .tree__item {
margin-top: 4px;
}
}
}
/* 鼠標懸停在列表項上時的樣式 */
.tree__item:hover {
background-color: #f2f2f2;
}
/* 點擊列表項時子節點的顯示狀態 */
.tree__item--active >.tree__sub {
opacity: 1;
visibility: visible;
}
}

以上代碼是CSS無限樹的基本結構，其中.tree表示樹狀結構的父容器，.tree__item表示列表項，.tree__sub表示子節點列表，.tree__item--root表示根節點的樣式。其中通過鼠標懸停和點擊樹狀結構的列表項來控制子節點的顯示和隱藏，讓樹狀結構的交互更加豐富。

在使用CSS無限樹時，我們可以根據需求來修改樣式，比如增加動畫效果、改變字體大小和顏色等等。這也正是CSS無限樹如此精彩的地方，能夠根據個人的需求來實現所需的效果，達到良好的展示效果和用戶體驗。