CSS セレクターから特定のクラスを除外するにはどうすればよいですか?

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

JavaScript が使用できない限定された環境で作業している場合、CSSダイナミックなスタイリングに欠かせないツールになります。よくある課題の 1 つは、特定の要素に別のクラスがある場合に、その要素が特定の CSS ルールの影響を受けないようにする方法です。

例として、要素の背景色を変更するタスクを考えてみましょう。 「reMode_selected」クラスも持たない限り、ホバー時に。次のコードは、これを実現する試みを示しています:

<code class="css">/* Do not apply background-color */
.reMode_selected .reMode_hover:hover {
}

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

ただし、このアプローチは、ホバー イベントが発生したかどうかに関係なく、「reMode_hover」クラスと「reMode_selected」クラスの両方を持つ要素をターゲットにしているため、失敗します。がトリガーされます。この問題を解決するには、複数のクラス セレクターをスペースなしで使用する必要があります (子孫セレクター):

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

このセレクターは、":not" 疑似クラスを使用して、"reMode_selected" クラスの要素をオブジェクトから除外します。 「reMode_hover」要素の上にマウスを置いたときの背景色のスタイル。

以上がCSS セレクターから特定のクラスを除外するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。