CSS ネストされたセレクターでアンパサンド (&) はどのように機能しますか?

CSS のネストされたセレクター: アンパサンド (&) がカバーされていない

CSS の領域では、アンパサンド (&) 記号は重要な役割を果たします。擬似要素とともに使用する場合の役割。開発者は Twitter Bootstrap などのライブラリでこの構文に遭遇しますが、その本質はすぐにはわかりません。

アンパサンドの動作

Twitter Bootstrap から提供された例では、アンパサンド (&) は疑似要素 :before および :after とともに使用されます。この構文では、セレクター修飾子のネストが可能です。

LESS 構文、CSS ではありません

問題の構文は CSS の一部ではなく、CSS に属していることに注意することが重要ですCSS を拡張するプリプロセッサである LESS に移行します。 LESS は、追加の機能を提供することで開発プロセスを簡素化します。

使用例とコンパイルの例

次の例は、アンパサンド (&) がどのように機能するかを示しています。

.clearfix {
  & :before {
    content: '';
  }
}

このコードは次のようにコンパイルされます:

.clearfix:before {
  content: '';
}

アンパサンド (&) を使用しないと、コードは次のようにコンパイルされます:

.clearfix :before {
  content: '';
}

アンパサンド (&) を使用すると、ネストされたセレクターは .clearfix:before にコンパイルされますが、それがない場合は .clearfix :before にコンパイルされます。この区別は、正しいスタイリングにとって非常に重要です。

以上がCSS ネストされたセレクターでアンパサンド (&) はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。