CSS 権威ガイド学習ノート (1) -- Attribute Selector_html/css_WEB-ITnose

属性の値に関係なく、特定の属性を持つ要素を選択する場合は、属性セレクターを使用できます。

たとえば、クラス属性 (値の制限なし) を持つすべての h1 要素を選択するには、次のように記述できます。

h1[class]{}

たとえば、複数の属性に基づいて選択することもできます。 、クラス属性を持つすべての h1 要素を同時に選択するため、href 属性と title 属性を持つ HTML ハイパーリンクのテキストは太字に設定され、次のように記述できます。

a[href][title]{font-weight: bold;}

を選択することもできます。属性属性値を持つ要素のみ。たとえば、「http://www .163.com」タグを指すリンクを選択したい場合:

a[href="http://www.163.com"]{}<span style="font-family:'Microsoft YaHei';font-size:14px;line-height:21px;">

同様に、複数の属性値セレクターを接続することもできます。たとえば、

a[href="http://www.163.com"][title="网易"]{}

この形式では、属性値が正確に一致する必要があることに注意してください。たとえば、

05f6308aece30d1d5f7f65645d5c2553

1 つの属性値のみを一致させたい場合は、チルダ (~) を使用する必要があります。例:

p[class~="link1"]{}/* ~可用于任何属性，不仅限于class */

このセレクターは

p.link1{}

IE7 以降のブラウザでは、以下に示すように「部分文字列一致セレクター」もサポートされています:

[foo^="bar"] /* 选择 foo 属性值以 "bar" 开头的所有元素 */

[foo$="bar"] /* 选择 foo 属性值以 "bar" 结尾的所有元素 */

[foo*="bar"] /* 选择 foo 属性值中包含 "bar" 的所有元素 */

たとえば、「 163」をポイントしたいとします。 .com" では、次のコードを使用できます:

a[href*="163.com"]{font-weight: bold;}

以下に示すように、特定の属性セレクターもあります:

*[lang|="en"]{}

このルールは、lang 属性を持つすべての要素を選択します。 en に等しいか、en- で始まります。