LESS CSS 疑似要素セレクターでのアンパサンド (&) は何をしますか?

CSS 擬似要素セレクターのアンパサンド (&) をわかりやすく理解する

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 中国語 Web サイトの他の関連記事を参照してください。