使用巢狀結構語法 ( 嵌套語法 )

許多 CSS 的預處理器 ( 例如 SASS、LESS ) 都有提供「巢狀結構」的語法 ( Nesting Selector、嵌套 )，透過巢狀結構的處理，在撰寫時就能更好理解每個父子元素的關係，目前主流的瀏覽器都已經支援「原生 CSS」的巢狀結構語法，這篇教學戶介紹巢狀結構語法以及相關注意事項。

快速導覽：

• 認識 CSS 巢狀結構
• 巢狀結構語法
• 使用巢狀結構語法的注意事項

認識 CSS 巢狀結構

CSS 的「巢狀結構」類似 JavaScript 的寫法，使用大括號「{}」包覆大括號「{}」的方式，產生一層一層嵌套的結構，CSS 的巢狀結構雖然沒有特別要求「縮排」，但通常每一層會使用「兩個空白」作為縮排，使用巢狀結構後，可以大幅縮減 CSS 結構選擇器的「重複語法」，下方範例使用「純 CSS」寫法和「巢狀結構」寫法呈現同一種樣式，下方是標準寫法：

div {color: gray;}
div h2 {color: red;}
div nav {color: black;}
div nav h2{color: blue;}

改成巢狀結構寫法：

div {
  color: gray;
  h2 {color: red;}
  nav {
    color: black;
    h2 {
      color: blue;
    }
  }
}

巢狀結構語法

CSS 巢狀結構很容易理解，下方列出主要的語法：

• 分層等於同一層的「空白」

  巢狀結構分層後，在預設架構中下層為上層的「子元素」，因此等於原本寫法的「空白」，下方範例的選擇器會選擇 div 裡面 h2 裡面 class 為 oxxo 的元素，下方是標準寫法：

  div h2 .oxxo {
    color: red;
  }
  

  改成巢狀結構寫法：

  div {
    h2 {
      .oxxo {
        color: red;
      }
    }
  }
  

• 使用「&」表示同一層

  如果下層選擇器使用「&」，表示「上層選擇器本身」，意思是下層與上層組合後會「沒有空白」，為同一層級，下方範例的選擇器會選擇 div 裡面 class 為 oxxo 的 h2，下方是標準寫法：

  div h2.oxxo {
    color: red;
  }
  

  改成巢狀結構寫法：

  div {
    h2 {
      &.oxxo {
        color: red;
      }
    }
  }
  

  由於「虛擬類別」或「虛擬元素」選擇器都是跟隨元素本身，撰寫時會出現大量重複的選擇器名稱，很適合使用「&」巢狀選擇器，下方是標準寫法：

  div a {color: blue;}
  div a:hover {color: red;}
  div a:focus {color: orange;}
  div a:active {color: gray;}
  

  改成巢狀結構寫法：

  div {
    a {
      color: blue;
      &:hover {color: red;}
      &:focus {color: orange;}
      &:active {color: gray;}
    }
  }
  

• 搭配「@」規則

  使用巢狀結構語法時，如果需要搭配「@ 規則」 ( At 規則，例如 @media、@property 等 )，可將「@ 規則」寫在巢狀結構內部，最後結果也等同將規則撰寫在外部，下方是標準寫法：

  @media (max-width: 500px) {
    h2 {font-size: 50px;}
  }
  @media (max-width: 400px) {
    h2 {font-size: 40px;}
  }
  @media (max-width: 300px) {
    h2 {font-size: 30px;}
  }
  

  改成巢狀結構寫法：

  h2 {
    @media (max-width: 500px) {
      font-size: 50px;
    }
    @media (max-width: 400px) {
      font-size: 40px;
    }
    @media (max-width: 300px) {
      font-size: 30px;
    }
  }
  

使用巢狀結構語法的注意事項

雖然 CSS 巢狀結構語法很方便，但使用上仍然要注意下列事項：

• ID 選擇器獨立撰寫，或放在巢狀結構最外層

  由於 ID 選擇器的權重最大 ( 參考「CSS 選擇器的優先順序」)，且一份 HTML 同名的 ID 只會有一個，因此通常都將其獨立撰寫，或撰寫在巢狀結構最外層。

• 避免過多的層級，造成權重干擾

  由於巢狀結構會較多層級，這些層級可能會進一步影響選擇器的權重，造成不容易維護的狀況，因此如果是較為單純或明確的結構，可適當的減少巢狀結構或使用標準語法。

• 舊版瀏覽器並不支援

  部分舊版瀏覽器並不支援 CSS 巢狀結構語法，如果使用了可能會造成整份 CSS 文件失效而無法套用樣式。

小結

隨著瀏覽器的進步，過去支援度不高的 CSS 巢狀結構語法也開始大量普及，相信透過這種撰寫方式，能夠更有效的撰寫 CSS 以及維護更複雜的樣式。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～