當與 CSS 偽元素一起使用時，與號 (&) 在 LESS 中如何運作？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-10-26 18:59:29

原創

961 人瀏覽過

How does the ampersand (&) work in LESS when used with CSS pseudo elements?

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中文網其他相關文章！