使用巢状结构语法

许多 CSS 的预处理器 ( 例如 Sass、Less ) 都有提供“巢状结构”的语法 ( Nesting Selector、嵌套 )，透过巢状结构的处理，在撰写时就能更好理解每个父子元素的关系，目前主流的浏览器都已经支援“原生 CSS”的巢状结构语法，这篇教学会介绍巢状结构语法以及相关注意事项。

快速导览：

• 认识 CSS 巢状结构
• 巢状结构语法
• 使用巢状结构语法的注意事项

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识 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 以及维护更复杂的样式。

意见反馈