CSS3 の属性セレクターの新機能の詳細な紹介

ゼロ、概要

CSS2 でサポートされている属性セレクターは、式 [{attribute |attribute {= |= | ~=} value}] を使用します
1.[class="a"] は class= にのみ一致します"a" の要素
2.[class~="a"] は class="a"、class="a b" の要素と一致することができます
3.[lang|=en] は lang="en" と一致することができます、 lang="en-us" 要素。

CSS3 は、*=、^=、$= の 3 つの新しい一致メソッドを追加します [{属性 | 属性 {*= | $=} 値}]:
1.*= はあいまい一致を意味します。 "] は href="163.com"、href="mail.163.com" およびその他の要素と一致します。
2.^= は指定された文字で始まることを意味し、[href^="/"] は href="/ と一致します。 /a.htm"、href="/b" 要素
3.$= は指定された文字で終わることを意味し、[scr$=".png"] は src="logo.png" などのすべての PNG 画像に一致します

CSS3 属性セレクターには主に次のタイプが含まれます:
1.E[attr]: 属性名のみを使用しますが、属性値は決定しません。
2.E[attr="value"]: 属性名を指定し、この属性の属性値;
3.E[attr~="value"]: 属性名を指定し、属性値を持ちます。単語リストには値の単語が含まれます。等号の前に「?」を記述する必要があります。
4.E[attr^="value"]: 属性名が指定されており、属性値は value で始まります。 5.E[ attr$="value"]: 属性名が指定されており、属性値があり、属性値は value で終わります。
6.E[attr*="value"]: 属性名は次のとおりです。属性値が指定されており、属性値に value が含まれています。
7.E[attr|="value"]: 属性名が指定されており、属性値が value または "value-" で始まる値です。 (例: zh-cn);

1. E[attr]: 属性セレクターは、CSS3 属性セレクターの最も単純なタイプです。属性値に関係なく、特定の属性を持つ要素を選択したい場合は、この属性セレクターを使用できます:

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

E[attr1][attr2] などの複数の属性を使用して要素を選択することもできます。両方の属性を持つすべての要素が選択されることを確認します:

.demo a[href][title] {background: yellow; color:green;}

注: IE6 はこのセレクターをサポートしていません。

2. E[attr="value"]: 属性値「value」を指定します

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

注: 特に属性値が単語の形式である場合、属性と属性値は正確に一致する必要があります。リスト (例:

Test

.demo a[class="links"]{color:red};   
.demo a[class="links item"]{color:red};

) IE6 はこのセレクターをサポートしていません。

3. E[attr~="value"]: 属性値の単語リスト内の単語に基づいて要素を選択する場合は、この属性セレクターを使用する必要があります: E[attr~= " value"] の場合、この種の属性セレクターは 1 つ以上の単語のリストです。リストの場合は、属性値の 1 つが一致する限り、要素を選択できます。前述したように、E[attr="value"] は、属性値が選択される前に正確に一致する必要があることを意味します。一方には「?」記号があり、他方には「?」記号がありません。サイン。

.demo a[title~="website"]{background:orange;color:green;}

注: 属性セレクターに波(?)がある場合、属性値が一致します。波(?)がない場合、属性値は完全に値である場合にのみ一致します。 IE6 は E[attr~="value"] 属性セレクターをサポートしていません。

4. E[attr^="value"]: attr 属性値が「value」で始まるすべての要素を選択します。つまり、選択された属性には、「value」で始まる対応する属性値があります。

.demo a[href^="http://"]{background:orange;color:green;}

注: IE6 は E[attr^="value"] セレクターをサポートしていません。

5. E[attr$="value"]: E[attr$="value"] 属性セレクターは、E[attr^="value"] セレクター、E[attr$="value" の反対です。 " "] は、attr 属性値が "value" で終わる要素をすべて選択することを意味します。つまり、要素の attr 属性を選択し、その属性値が value で終わるものを選択します。これは、一部の特殊なリンクに背景画像を追加するために使用されます。たとえば、この属性を使用して、pdf、png、doc などのさまざまなファイルにさまざまなアイコンを追加できます。 』属性選択装置。

6. E[attr*="value"]:

attr 属性値に部分文字列「value」が含まれるすべての要素を選択します。つまり、選択した属性の属性値にこの「値」値が含まれている限り、その属性は選択されます。

.demo a[href$="png"]{background:orange;color:green;}

注: IE6 は E[attr*="value"] セレクターをサポートしていません。

7. E[attr|="value"]:

特定の属性セレクターを呼び出します。このセレクターは、attr 属性値が value に等しいか、value- で始まるすべての要素を選択します。

.demo a[title*="site"]{background:black;color:white;}

注: これは言語を一致させるためによく使用されます。IE6 は E[attr|="value"] セレクターをサポートしません。

注:
1. 属性セレクターをサポートしていない IE6 を除き、他のブラウザーは属性セレクターをサポートできます。
2.E[attr="value"] と E[attr*="value"] が最も実用的で、その中でも E[attr="value"] はさまざまなタイプの要素、特にフォーム要素を見つけるのに役立ちます。 input[type="text"]、input[type="checkbox"] など、および E[attr*="value"] は、Web サイトなどの Web サイト内のさまざまな種類のファイルを照合するのに役立ちます。 Web サイトのユーザー エクスペリエンスを向上させるには、さまざまなファイル タイプへのリンクに異なるアイコンを使用する必要があります。前の例と同様に、この属性を「.doc」、「.pdf」、「.png」、「.ppt」の構成に使用できます。異なるアイコン。

CSS3 に新しく追加された属性セレクターの機能の詳細については、PHP 中国語 Web サイトの関連記事に注目してください。