クラスの CSS のワイルドカードセレクター (*、^、$)-CSSチュートリアル-php.cn

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

王林

リリース： 2023-09-04 09:57:11

転載

1594 人が閲覧しました

クラスの 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 番目の

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

リーリー＃＃＃例＃＃＃

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

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

リーリー

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