CSS セレクターから特定のクラスを除外する方法: ステップバイステップ ガイド

CSS セレクターから特定のクラスを除外する

複数のクラスを持つ要素をターゲットにする場合、目的を達成するには特定のクラスを正確に選択または除外することが重要になります。スタイリング。この記事では、特定のクラスを持つ要素に背景色を適用する必要があるが、別の特定のクラスを持つ要素を除外する必要がある一般的なシナリオについて説明します。

サンプル シナリオ

次の HTML マークアップを考えてみましょう:

<code class="html"><a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

目的は、ユーザーが最初のリンクの上にマウスを置いたときに背景色をそのリンクに適用することですが、2 番目のリンクには追加クラス「reMode_selected」があるため、この効果から除外します。 ."

初期試行

最初に次の CSS を試すことができます:

<code class="css">.reMode_selected .reMode_hover:hover {}

.reMode_hover:hover {
   background-color: #f0ac00;
}</code>

ただし、これは正しく機能しません。ルールは 2 番目のルールをオーバーライドします。 「reMode_selected」クラスを持つ要素を正しく除外するには、複数のクラス セレクターを使用します。

<code class="css">.reMode_hover:not(.reMode_selected):hover {
   background-color: #f0ac00;
}</code>

このルールは、「reMode_hover」クラスを持つ要素をターゲットとしますが、「reMode_selected」クラスを持つ要素も除外します。上にマウスが置かれます。その結果、最初のリンクはホバー時に背景色を受け取りますが、2 番目のリンクは変更されません。

以上がCSS セレクターから特定のクラスを除外する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。