LESS CSS 偽元素選擇器中與號 (&) 的作用是什麼？

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

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

<code class="css">.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}</code>

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

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

<code class="less">.clearfix { 
  &amp;:before {
    content: '';
  }
}</code>

這將編譯為：

<code class="css">.clearfix:before {
  content: '';
}</code>

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

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

以上是LESS CSS 偽元素選擇器中與號 (&) 的作用是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！