CSS樹形圖譜是一種用于展示層級結構的圖形化表示方式。在Web開發中，我們經常需要展示層級結構，比如網站導航菜單、文件目錄結構等等。這時，使用CSS樹形圖譜可以使頁面更加美觀、清晰。

要創建CSS樹形圖譜，我們需要用到CSS選擇器和偽元素。首先，我們需要定義樹形圖的HTML結構。常見的結構是使用

和
• 標簽，如下所示：

  <ul class="tree">
  <li>節點1
  <ul>
  <li>節點1.1</li>
  <li>節點1.2</li>
  </ul>
  </li>
  <li>節點2</li>
  <li>節點3
  <ul>
  <li>節點3.1</li>
  <li>節點3.2</li>
  <li>節點3.3
  <ul>
  <li>節點3.3.1</li>
  <li>節點3.3.2</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>

  在HTML結構中，需要使用嵌套的

  和
  • 標簽來模擬層級結構，其中
    表示父節點，
    • 表示子節點。

      接下來，我們可以使用CSS選擇器和偽元素來對樹形圖進行樣式設計。下面是一個簡單的CSS樣式示例：

      /* 隱藏子節點 */
      .tree li ul {
      display: none;
      }
      /* 顯示子節點 */
      .tree li:before {
      content: "+";
      display: inline-block;
      margin-right: 5px;
      }
      .tree li.expanded:before {
      content: "-";
      }
      /* 點擊展開子節點 */
      .tree li.expanded >ul {
      display: block;
      }

      上述CSS樣式中，我們首先為所有的子節點隱藏了它們自己的子節點。接著，使用偽元素:before來添加一個“+”號圖標，表示該節點擁有子節點。當用戶點擊該節點時，我們可以使用JavaScript切換該節點的class屬性，從而顯示或隱藏其子節點。

      總之，使用CSS樹形圖譜可以使我們更加方便、快捷地展示層級結構。接下來，你可以嘗試使用不同的顏色、圖標等樣式進行設計，創造出自己的獨特樣式。