アンパサンド (&) を LESS と組み合わせると、CSS 擬似要素でどのような働きをしますか?-CSSチュートリアル-php.cn

アンパサンド (&) を LESS と組み合わせると、CSS 擬似要素でどのような働きをしますか?

Mary-Kate Olsen

リリース： 2024-10-27 03:59:30

オリジナル

825 人が閲覧しました

What does the ampersand (&) do in CSS pseudo-elements when combined with LESS?

CSS 擬似要素のアンパサンド (&) について

CSS では、擬似要素を使用して、スタイルを指定せずに要素にスタイルを追加できます。 HTML のコンテンツまたは構造を変更する。疑似要素と組み合わせて使用すると、アンパサンド (&) 文字は特定の目的を果たします。

Twitter Bootstrap でよく見られる次の CSS スニペットを考えてみましょう。

.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}

ログイン後にコピー

このコードでは、アンパサンド (&) は疑似要素 :before および :after の前に使用されます。これは、疑似要素に適用されるスタイルが、クラス ".clearfix" を持つ親要素に適用された場合にのみ適用できることを示します。

この構文は CSS のネイティブではないことに注意することが重要です。これは、CSS プリプロセッサである LESS に由来します。 LESS では、アンパサンド (&) を使用してセレクター修飾子のネストが可能になります。例:

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

ログイン後にコピー

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

.clearfix:before {
  content: '';
}

ログイン後にコピー

アンパサンド (&) の存在により、ネストされたセレクターは確実に「.clearfix:before」にコンパイルされます。これがなければ、結果のコードは ".clearfix :before" になります。

要約すると、LESS の疑似要素と組み合わせて使用すると、アンパサンド (&) 文字によりセレクター修飾子のネストが可能になります。特定の要素の子孫にスタイルを適用する便利な方法を提供します。

以上がアンパサンド (&) を LESS と組み合わせると、CSS 擬似要素でどのような働きをしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。