當與 CSS 偽元素一起使用時，與號 (&) 在 LESS 中如何運作？

CSS 偽元素中的& 符號：A LESS Trick

在CSS 中，& 符號通常與偽元素結合使用，例如：之前和之後。然而，在 Twitter Bootstrap 提供的範例中，& 符號的使用方式略有不同。

有問題的語法是：

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

經過仔細檢查，我們意識到這是不是純粹的 CSS，而是 LESS，一個流行的 CSS 預處理器。在 LESS 中，& 符號允許選擇器嵌套。透過在偽元素前面加上父選擇器(&)，我們可以實現以下效果：

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

這將編譯為：

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

如果沒有＆符號，選擇器將編譯到.clearfix :before，這不是有效的CSS 語法。因此，在 LESS 中，& 符號用於嵌套選擇器修飾符，從而使程式碼更加簡潔和可讀。

以上是當與 CSS 偽元素一起使用時，與號 (&) 在 LESS 中如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！