非包括的な選択に CSS セレクターを使用する方法

CSS は、HTML ドキュメントの外観とレイアウトを制御するために使用できる非常に強力なスタイル シート言語です。 CSS では、セレクターは HTML 要素を選択するためのパターンです。セレクターを使用すると、ドキュメント内の要素のスタイルを簡単に変更して、目的の効果を実現できます。 CSS では、一部の要素を選択し、他の要素を除外する必要がある場合がありますが、この記事では、CSS セレクターを使用して排他的選択を行う方法を紹介します。

なぜ選択を除外する必要があるのでしょうか?

実際のプロジェクトでは、Web ページ アプリケーション全体の要素のスタイルを設定する必要がある場合がありますが、一部の特定の要素を除外する必要があります。この場合、除外選択は必要のない要素を除外するのに便利で、これによりスタイルがより現実的になります。

CSS に含まれていないメソッドを選択する

CSS セレクターには多くの種類があり、そのうちのいくつかはセレクターに含まれていない要素に使用できます。この記事では、次の一般的な状況を紹介します。

1. Negative pseudo-class selector

Negative pseudo-class selector は、特定の要素を除くすべての要素を選択できます。通常、:not() セレクター形式を使用します。

特定の構文:

:not(selector) {}

selector は、除外される要素を参照します。

たとえば、すべての p 要素のスタイルを設定したいが、クラスが Hide である特定の p 要素を除外したいとします。コードは次のとおりです:

p:not(.hide) {
  color: red;
}

この例では、 we use:not () セレクターは、クラス名が Hide のすべての p 要素を除外します。このようにすると、すべてのp要素の文字色が赤になりますが、hideクラスのp要素の色は変わりません。

2. 子と擬似クラス セレクターの組み合わせ

子孫要素と擬似クラス セレクターを組み合わせて使用​​すると、特定の要素の下にあるすべての要素を選択し、特定の要素を除外できます。要素。

具体的な構文:

selector :not(selector) {}

たとえば、すべての div 内の p 要素のスタイルを設定したいが、クラスが Hide である特定の p 要素を除外したい場合のコードは次のとおりです。 :

div p:not(.hide) {
  color: red;
}

この例では、:not() セレクターと子孫要素セレクターを使用して、クラス名が hide のすべての p 要素を除外します。このように、div要素内のすべてのp要素の文字色は赤になりますが、hideクラスのp要素の色は変わりません。

3. ユニバーサル セレクター

ユニバーサル セレクター (*) はすべての要素を選択できますが、他のセレクターと組み合わせて、ユニバーサル セレクターで一部の要素を除外することもできます。たとえば、ボックスの特定のクラスを持つ要素のスタイルを設定したいが、クラス foo を持つ要素の 1 つを除外したいとします。コードは次のとおりです:

.box:not(.foo) {
  background-color: blue;
}

この例では、:not() 選択を使用します。セレクター、ユニバーサル セレクター、およびクラス セレクターを使用して、クラス foo を持つすべての要素を除外します。このようにして、foo クラスを除くすべての要素をクラス ボックスでスタイル設定するだけです。

概要

実際の開発では、特定のスタイル要件を満たすために特定の要素を除外する必要があることがよくあります。この記事では、以下を含まない要素を選択する 3 つの方法を紹介しました。

• 否定された疑似クラス セレクターを使用する: not()
• 子孫要素と疑似クラスを組み合わせて使用​​するclass selector :not()
• Use universal selector (*)

上記のメソッドを使用して、HTML 要素のスタイルを制御し、さまざまな効果を実現できます。必要な用途。

以上が非包括的な選択に CSS セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。