CSS中的

和
• 元素是用于構建樹形結構的非常常用的標記元素。在許多網格布局中，常用它們來設計菜單、導航欄和分類列表等。

  示例代碼：
  <ul class="tree">
  <li>根節點</li>
  <ul>
  <li>子節點 1</li>
  <li>子節點 2</li>
  <li>子節點 3</li>
  <ul>
  <li>孫子節點 1</li>
  <li>孫子節點 2</li>
  </ul>
  </ul>
  </ul>

  上面的示例代碼是一個較為簡單的樹形結構，其中的

  標記定義了樹形結構的整個容器，而包含在其中的
  • 標記則定義了樹形結構的各個節點和分支。每當我們需要增加新的節點和分支時，只需要添加相應的
  • 標記即可。例如，在上例中如果我們需要再增加一層“曾孫節點”，只需要在“孫子節點”的下面再包含一個新的
    和
    • 即可。

      CSS中，我們可以使用偽類選擇器實現對樹形結構中的各個節點進行樣式調整。例如，我們可以使用以下代碼來為整個樹形結構添加樣式：

      .tree{
      margin: 0;
      padding: 0;
      list-style: none;
      }

      這里我們將列表的樣式設置為無，以避免其默認樣式對我們的樹形結構產生影響。同時，我們也將樹形結構的margin和padding設置為0以便美觀性。如果我們需要對樹形結構的各個節點進行調整，例如，讓其在選中狀態變為深灰色，可以使用以下代碼：

      .tree li.selected{
      color: #333;
      background: #ccc;
      }

      在上面的示例中，我們通過添加.selected類選擇器，定義了在選中狀態下各個節點的顯示效果，包括前景色和背景色。當然，在上述代碼之前我們必須通過Javascript或其他代買方法為樹形結構添加支持選中狀態的功能，否則該代碼并不會生效。

      總結一下，CSS的

      和
      • 元素是用于構建樹形結構的非常重要的基礎元素，通過它們我們可以輕松地設計出適合各類網頁布局和場景的菜單、導航欄和分類列表等。同時，我們也可以通過CSS樣式調整實現各種效果，來滿足用戶設計需求。