當在CSS 中遇到這樣的代碼時,很自然地想知道& 符號(&)的意義) 字元:
<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。如果沒有它,它們將編譯為 .clearfix :before,這將導致無效的 CSS 選擇器。
在您提供的 Twitter Bootstrap 範例中,& 符號用於將樣式套用於偽元素 (::before和 ::after) 作為 .clearfix 元素的子元素建立。這允許您簡潔地定義這些偽元素並在 CSS 中維護模組化結構。
以上是LESS CSS 偽元素選擇器中與號 (&) 的作用是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!