クラスの CSS のワイルドカード セレクター (*、^、$)

CSS では、クラス名、ID、タグなどによって要素を選択するためにセレクターが使用されます。 CSS では、HTML 要素を選択するクエリを定義するために使用できるワイルドカード セレクターもいくつかあります。

ワイルドカード セレクターを使用すると、特定の属性 (クラスや ID など) の値に特定の部分文字列を含む HTML 要素を選択できます。このチュートリアルでは、*、^、および $ ワイルドカード セレクターを使用してクラスと ID を表す方法を学習します。

CSS には (*=) ワイルドカード セレクターが含まれています

Contains (*=) ワイルドカード セレクターを使用すると、開発者は、属性値に部分文字列として「string」が含まれるすべての HTML 要素を検索できます。たとえば、クラスで「*」ワイルドカード セレクターを使用すると、クラス名にその文字列が含まれるすべての HTML 要素が検索されます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、クラスに (*) を含むワイルドカード セレクターを使用できます。

リーリー

上記の構文は、クラス名の部分文字列として「string」を含むすべての HTML 要素を選択します。

＃＃＃例＃＃＃

以下の例では、4 つの異なる div 要素を作成し、クラス名に基づいてテキストを追加しました。 CSS では、「contains」ワイルドカード セレクターを使用して、クラス名に部分文字列として「test」が含まれるすべての div 要素を選択します。

出力では、最初の 2 つの div 要素のテキストの色が赤であることがわかります。これは、「test」部分文字列を含むクラス名が含まれているためです。

リーリー

CSS は (^=) ワイルドカード セレクターで始まります

(^=) で始まるワイルドカード セレクターを使用すると、属性値が特定の部分文字列で始まるすべての HTML 要素を選択できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、クラスのワイルドカード文字で始まるセレクターを使用できます。

リーリー

上記の構文は、クラス名が「string」で始まるすべての HTML 要素を選択します。

＃＃＃例＃＃＃

以下の例では、(^=) で始まるワイルドカード CSS セレクターとクラスを使用して、クラス名に基づいて要素を選択します。

出力では、先頭に「test」文字列が含まれているため、最初と 3 番目の div 要素のテキストが青に変わっていることがわかります。 2 番目の div 要素にはクラス名に「test」が含まれていますが、これはクラス名の最後にあるため、先頭の (^=) ワイルドカード セレクターによって選択されません。

リーリー

CSS の ($=) ワイルドカード セレクターで終わる

($=) で終わるワイルドカード セレクターは、特定の属性値の末尾に部分文字列が含まれる場合、すべての HTML 要素を選択します。たとえば、2 つの異なる要素のクラス名が「onestart」と「lastone」で、部分文字列が「one」の場合、最初の部分文字列の終わりが含まれるため、クラス名「lastone」のみを持つ HTML 要素が選択されます。 。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、($=) で終わるワイルドカード CSS セレクターをクラスで使用できます。

リーリー

上記の構文は、クラス名が「string」部分文字列で終わるすべての HTML 要素を選択します。

＃＃＃例＃＃＃

以下の例では、2 番目の

nd

と 4 番目の div 要素には、クラス名の値の末尾に「test」部分文字列が含まれています。最後にワイルドカード ($=) を付けた CSS セレクターを使用して 2 つの div 要素を選択し、それらにボーダー、マージン、パディングを適用します。

リーリー ＃＃＃例＃＃＃

以下の例では、クラスを属性として使用する代わりに、id で終わる CSS セレクターを使用します。他のプロパティとワイルドカード CSS セレクターを使用して HTML 要素を選択する方法を示します。

ここでは、ID 値の最後に「name」が含まれる HTML 要素をすべて選択し、フォントのスタイルと色を変更します。

リーリー

ユーザーは、クラスでワイルドカード CSS セレクターを使用する方法を学びました。ユーザーは、contains (*=) CSS セレクターを使用して、属性値の中間に部分文字列が含まれる要素を取得できます。また、(^=) CSS セレクターを使用して、属性値の先頭に部分文字列が含まれ、($ で終わる) を持つ要素を取得できます。 ）。 =)終わり。

さらに、ユーザーは、前の例の id など、他のプロパティでワイルドカード CSS セレクターを使用する方法を学びました。

以上がクラスの CSS のワイルドカード セレクター (*、^、$)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。