在Web前端開發中，樹形級聯菜單，是一種常見且實用的界面互動元件。它不僅可以提供清晰的導航和大量資訊分類展示，還能讓使用者更友善地進行操作和查詢。然而，除了其直覺的功能外，樹形級聯菜單，還可以被用于學習和應用CSS選擇器以及CSS技巧。本文将通過代碼和執行個體，分步驟地講解如何通過樹形級聯菜單，來了解和運用CSS選擇器與CSS技巧。

基本示例

接下來，我們通過上一篇文章的例子，來了解本文的資訊點。

HTML

<ul id="tree-menu">
    <li><label>Device 1</label>
        <ul>
            <li><label>Subdevice 1-1</label></li>
            <li><label>Subdevice 1-2</label>
                <ul>
                    <li><label>Subdevice 1-2-1</label></li>
                    <li><label>Subdevice 1-2-2</label></li>
                    <li><label>Subdevice 1-2-3</label></li>
                    <li><label>Subdevice 1-2-4</label></li>
                    <li><label>Subdevice 1-2-5</label></li>
                    <li><label>Subdevice 1-2-6</label></li>
                    <li><label>Subdevice 1-2-7</label></li>
                    <li><label>Subdevice 1-2-8</label></li>
                    <li><label>Subdevice 1-2-9</label></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><label>Device 2</label></li>
</ul>

基礎樣式

CSS

<style type="text/css">
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 預設隐藏子項 */
#tree-menu ul {
    display: none;
}
/* 點選節點展開子項 */
#tree-menu li.collapsed>ul {
    display: block;
}
</style>

層級樣式

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
</style>

邊框及選中樣式

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
}

#tree-menu li {
    border: 1px solid #ddd;
}

#tree-menu li+li {
    border-top: 0;
}

#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}
</style>

圓角樣式1

CSS

<style type="text/css">
#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
#tree-menu li {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom:0.5rem;
}
/* #tree-menu li+li {
    border-top: 0;
}  */
#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
    border-radius: 10px;
}
</style>

圓角樣式2

li label{ }

這個示例表示：li元素下面所有層級的label

li>label{ }

這個示例表示：li元素孩子級層級的label

CSS

#tree-menu li ul {
    padding: 0.5rem 1rem;
} 
#tree-menu li {
    border: 1px solid #ddd;
    /* border-radius: 10px;
    margin-bottom:0.5rem; */
}
/* 第一個子節點之後的所有兄弟節點 */
#tree-menu li+li {
    border-top: 0;
}
/* 第一個子節點 設定頂部圓角 */
#tree-menu li:first-child,
#tree-menu li:first-child>label {
    border-radius: 10px 10px 0 0;
}

/* 最後一個子節點 設定底部圓角  */
#tree-menu li:last-child,
#tree-menu li:last-child>label {
    border-radius: 0 0 10px 10px ;
}

/* 隻有唯一 一個子節點時，頂部底部都設定圓角 */
#tree-menu li:only-child,
#tree-menu li:only-child>label {
    border-radius: 10px ;
}

/* 
    展開時背景圓角修複 
    :first-child 第一個子節點

    :not(:only-child)非唯一子節點
    這裡表示這個子節點有子項

*/
#tree-menu li.collapsed:first-child:not(:only-child)>label {
    border-radius: 10px 10px 0 0;
}
#tree-menu li.collapsed:not(:only-child)>label {
    border-radius: 0;
}

#tree-menu label {
    display: block;
    padding: 0.5rem 1rem;
}
/* 
 :hover 滑鼠在元素上面時
*/
#tree-menu label:hover {
    background-color: aliceblue;
    /* border-radius: 10px; */
}

節點标記樣式

CSS

#tree-menu li label {
    position: relative;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
}

/**
  如果有子項，添加展開或折疊的标記符号。
  預設折疊标記 
*/
#tree-menu li label::before {
    position: absolute;
    content: '-';
    left: 0;
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示沒有兄弟元素 
  不顯示标記
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 顯示展開标記 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

到此，一個還比較美觀的樹形菜單，基本完成了。

但是，有朋友說，我要實作以下需求呢？

1、不要邊框；

2、保留縮進；

3、保留展開折疊标記；

3、橫向拉通選擇；

橫向拉通選擇樣式

CSS

#tree-menu label {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
}

#tree-menu label:hover {
    background-color: aliceblue;
}

/** 縮進拉通選擇*/
#tree-menu li label {
    padding-left: 0;
}
#tree-menu li li label {
    padding-left: 0.5rem;
}
#tree-menu li li li label {
    padding-left: 1rem;
}
#tree-menu li li li li label {
    padding-left: 1.5rem;
}
#tree-menu li li li li li label {
    padding-left: 2rem;
}
#tree-menu li li li li li li label {
    padding-left: 2.5rem;
}


/**
  如果有子項，添加展開或折疊的标記符号。
  預設折疊标記 
*/
#tree-menu li label::before {
    float: left;
    content: '-';
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示沒有兄弟元素 
  不顯示标記
*/
#tree-menu li label:only-child::before {
    content: ' ';
}

/* 顯示展開标記 */
#tree-menu li.collapsed>label::before {
    content: '+';
}

如果層級很深，我不是得寫很多個li才能實作多級縮進？

比如：tree-menu li li li li li li li li li li li label{}

JavaScript方式

查找所有 label 元素，然後看 label 元素上面有多少個 li 元素，以此判斷所屬層級。

CSS

<script>
  function parents(element, selector) {
  var parentsArray = [];
  var parent = element.parentNode;
  
  while (parent && parent !== document) {
    if (parent.matches(selector)) {
      parentsArray.push(parent);
    }
    parent = parent.parentNode;
  }
  return parentsArray;
}

  const items = document.querySelectorAll('#tree-menu label');
  items.forEach((item) => {
    const level = parents(item.parentElement, 'li').length
    const padding = 10  * level;
    item.style.paddingLeft = `${padding}px`;
  });
</script>

1、我不想寫JavaScript；

2、我不想寫多個li li li li li li li；

3、我不想寫多個.level1{} .level2{} .level3{}；

4、我想寫少量CSS代碼，來解決這個問題，一勞永逸；

5、我想它支援無限層級的縮進；

有這樣CSS代碼嗎？我怎麼不知道？

你别說，還真有這樣得CSS代碼。

當然，這也是本文得重點，算一個CSS得小技巧吧。

counters() 簡介

CSS 函數 counters() 是一個嵌套計數器，傳回表示指定計數器目前值的連接配接字元串。counters() 函數有兩種形式： counters(name, string) 或 counters(name, string, style) 。它通常和僞元素搭配使用，但是理論上可以在支援<string>值的任何地方使用。生成的文本是具有給定名稱的所有計數器的值，從最外層到最内層，之間由指定字元串分隔。計數器以訓示的樣式呈現，如果未指定樣式，則預設為十進制。

先看一個例子：

HTML

<ol>
  <li>
     <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
  </li>
  <li></li>
  <li></li>
  <li>
     <ol>
        <li></li>
        <li>
           <ol>
              <li></li>
              <li></li>
              <li></li>
           </ol>
        </li>
      </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
   content:  counters(listCounter, '.', upper-roman) ') ';
}
li::before {
  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
}

counters() 示例

通過上面的例子，我們看到了類似word的多級清單。此時很多朋友可能已經有思路了，那麼我們将利用CSS這個特性，來實作上面的要求。

修改了部分樣式

#tree-menu label {
    position: relative;
    display: block;
    /* padding: 0.5rem 1rem; */
    padding: 0.5rem 1rem 0.5rem 0;
}
/* #tree-menu li label::before {} */
#tree-menu li label::after {}
  
/* #tree-menu li label:only-child::before {} */
#tree-menu li label:only-child::after {}
  
/* #tree-menu li.collapsed>label::before {} */
#tree-menu li.collapsed>label::after {}

counters屬性樣式

/** 縮進拉通選擇 修改前*/
/* #tree-menu li label {
    padding-left: 0;
}
#tree-menu li li label {
    padding-left: 0.5rem;
}
#tree-menu li li li label {
    padding-left: 1rem;
}
#tree-menu li li li li label {
    padding-left: 1.5rem;
}
#tree-menu li li li li li label {
    padding-left: 2rem;
}
#tree-menu li li li li li li label {
    padding-left: 2.5rem;
} */

/* 修改後 */
#tree-menu,
#tree-menu ul {
    counter-reset: listCounter;
}

#tree-menu label {
    counter-increment: listCounter;
}

#tree-menu label::before {
    float: left;
    /* 把标記設定成透明 */
    color:transparent;
    /* 預設數字*/
    content: counters(listCounter, "");
}

完整的CSS

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/** 
折疊狀态與展開狀态樣的樣式
 */
#tree-menu ul {
    display: none;
}

#tree-menu li.collapsed>ul {
    display: block;
}

#tree-menu label {
    position: relative;
    display: block;
    padding: 0.5rem 1rem 0.5rem 0;
}

#tree-menu label:hover {
    background-color: aliceblue;
}

/** 縮進拉通選擇*/
/* 修改後 */
#tree-menu,
#tree-menu ul {
    counter-reset: listCounter;
}

#tree-menu label {
    counter-increment: listCounter;
}

#tree-menu label::before {
    float: left;
    /* 将序号設定為透明 */
    color:transparent;
    /***/
    content: counters(listCounter, "");
}



/**
  如果有子項，添加展開或折疊的标記符号。
  預設折疊标記 
*/
#tree-menu li label::after {
    float: left;
    content: '-';
    width: 1.6rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    color: #333;
}

/** 
  :only-child表示沒有兄弟元素 
  不顯示标記
*/
#tree-menu li label:only-child::after {
    content: ' ';
}

/* 顯示展開标記 */
#tree-menu li.collapsed>label::after {
    content: '+';
}

通過樹形級聯菜單，學習CSS選擇器與CSS技巧，是一種非常有效的學習方法。我們不僅可以學會如何使用各種選擇器，來控制頁面元素，還能掌握一些實用的CSS技巧和概念。希望本文對您了解樹形級聯菜單、CSS選擇器和CSS技巧有所幫助，并能為您在Web前端開發中的工作提供一些啟發。

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的浏覽，我們一起加油吧。

Web前端通過【樹形級聯菜單】了解【CSS選擇器】與【CSS技巧】

基本示例

基礎樣式

層級樣式

邊框及選中樣式

圓角樣式1

圓角樣式2

節點标記樣式

橫向拉通選擇樣式

JavaScript方式

counters() 簡介

counters() 示例

完整的CSS

繼續閱讀

不定寬高元素垂直左右居中

設定placeholder樣式

Ajax入門(與Java伺服器互動)(三)——解析XML資料、使用級聯下拉選擇框

CSS相容寫法中zoom:1的作用

CSS樣式覆寫優先級小結

WEB前端開發工程師必備實用的50個CSS技巧

border-image使用

smartclient——menu導航菜單

CSS單行文字和多行文字超出部分省略号顯示

提升CSS技巧：:is(), :where(), 和:has()僞元素的運用

15個不太為人所知的CSS技巧和竅門，建議每個前端開發者都了解下

修改input與textarea的placeholder樣式

10個常見的CSS技巧，建議點贊收藏！#程式員#程式設計#計算機#前端#it

Web前端【樹形級聯菜單】怎麼實作？

web前端，樹形級聯菜單，多級縮進樣式代碼，原來還可以這麼寫，學到了！#程式員經驗分享##前端冷知識#網頁連結

20個從“玄學”到科學的CSS技巧