CSS 偽元素中的與號 (&) 與 LESS 結合使用有何作用？

理解CSS 偽元素中的& 符號

在CSS 中，偽元素可用於為元素添加樣式，而無需修改HTML 的內容或結構。當與偽元素結合使用時，與號 (&) 字元有特定用途。

考慮以下 CSS 片段，經常在 Twitter Bootstrap 中看到：

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

在此程式碼中，與號 (&) 用在偽元素 :before 和 :after 之前。這表示套用於偽元素的樣式僅在套用於類別為「.clearfix」的父元素時才適用。

要注意的是，此語法不是 CSS 原生的。它源自於 LESS，一個 CSS 預處理器。在 LESS 中，與號 (&) 允許巢狀選擇器修飾符。例如：

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

此程式碼將編譯為：

.clearfix:before {
  content: '';
}

與符號 (&) 的存在確保巢狀選擇器編譯為「.clearfix:before」。如果沒有它，產生的程式碼將是“.clearfix :before”。

總之，當與LESS 中的偽元素結合使用時，與號(&) 字元允許選擇器修飾符的嵌套，因此提供一種便捷的方式將樣式專門應用於給定元素的後代。

以上是CSS 偽元素中的與號 (&) 與 LESS 結合使用有何作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！