揭秘CSS 偽元素選擇器中的& 符號

當在CSS 中遇到這樣的代碼時，很自然地想知道& 符號(&) 的意義) 字元:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

但是，要注意的是，此語法不是 CSS 的一部分。相反，它屬於名為 LESS 的 CSS 預處理器。

LESS 允許您使用 & 字元嵌套選擇器修飾符。這使您能夠透過避免重複來編寫簡潔且可讀的程式碼。例如：

.clearfix { 
  &:before {
    content: '';
  }
}

這將編譯為：

.clearfix:before {
  content: '';
}

& 符號確保巢狀選擇器編譯為 .clearfix:before。如果沒有它，它們將編譯為 .clearfix :before，這將導致無效的 CSS 選擇器。

在您提供的 Twitter Bootstrap 範例中，& 符號用於將樣式套用至偽元素 (::before和 ::after) 為 .clearfix 元素的子元素建立。這允許您簡潔地定義這些偽元素並在 CSS 中維護模組化結構。