以下に、質問形式と記事の焦点である LESS とアンパサンドを組み合わせた、いくつかのタイトルオプションを示します。 * LESS 疑似要素セレクターにアンパサンド (&) が表示されるのはなぜですか? *アンペアとは何ですか-CSSチュートリアル-php.cn

以下に、質問形式と記事の焦点である LESS とアンパサンドを組み合わせた、いくつかのタイトルオプションを示します。 * LESS 疑似要素セレクターにアンパサンド (&) が表示されるのはなぜですか? *アンペアとは何ですか

Patricia Arquette

リリース： 2024-10-28 11:43:02

オリジナル

681 人が閲覧しました

Here are a few title options, combining question format with the article's focus on LESS & ampersands:

* Why do I see an ampersand (&) in LESS pseudo-element selectors?
* What does the ampersand (&) signify in LESS pseudo-element selectors?
* How does t

CSS 疑似要素セレクターのアンパサンド (&)

CSS では、疑似要素セレクターの前にアンパサンド (&) 文字が配置される場合があります。この使用法は標準 CSS の一部ではありませんが、LESS などの前処理言語でよく見られます。

LESS 構文

LESS では、アンパサンドがネスト演算子として機能し、ネストされた要素をさらに選択できるようになります。簡潔に。これは親セレクターを表し、複数のセレクターを連鎖するために使用できます。

次の LESS 構文を考えてみましょう:

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

ログイン後にコピー

ここで、:before と :after の前のアンパサンドは、これらの疑似要素であることを示しています。 .clearfix 内にネストされています。この構文は次の CSS にコンパイルされます:

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

ログイン後にコピー

例

たとえば、次の LESS コード:

.example {
  &amp;:hover {
    color: red;
  }
}

ログイン後にコピー

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

.example:hover {
  color: red;
}

ログイン後にコピー

以上が以下に、質問形式と記事の焦点である LESS とアンパサンドを組み合わせた、いくつかのタイトルオプションを示します。 * LESS 疑似要素セレクターにアンパサンド (&) が表示されるのはなぜですか? *アンペアとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。