CSSプロパティセレクター
1. 属性セレクターとは
属性セレクターとは、htmlの属性タグをセレクターとして使用することを指し、その機能は、指定された属性を持つHTML要素にスタイルを設定することです。
属性セレクターは、class 属性や id 属性だけでなく、指定された属性を持つ HTML 要素のスタイルを設定できます。
注意: IE ブラウザを使用している場合、属性の選択は IE6 以前のバージョンではサポートされていません。 IE7 は、!DOCTYPE が指定されている場合にのみ属性セレクターの使用をサポートします。
2. 属性セレクターの構文
次の例では、属性セレクターは [] で表示され、title 属性を持つすべての要素のスタイルを設定します。
color:red;
}
単純な属性セレクター
その値ではなく名前のみに注意を払う、これが単純な属性セレクターの特徴です。h1[class] {color: silver;} は、class の値に関係なく、class を持つ任意の h1 要素に適用されます。したがって、Hello
、Serenity
、Fooling
の h1 は; このルールの影響を受けます。
正確な属性値セレクター
id と class は本質的に正確な属性値セレクターです。はい、h1#logo は h1[id="logo"] と同じです。前に述べたように、ID やクラスに限定されず、任意の属性を使用できます。たとえば、a[href="//m.sbmmt.com/"][title="W3C Home"] {font-size: 200%;} は 。部分属性値セレクター
その名前が示すように、属性値が部分的に一致する限り（ここでの部分は実際には単語全体と一致します）、要素に作用します。例を見てみましょう:
プルトニウムを取り扱うときは、臨界量の形成を避けるように注意する必要があります。
p[class~= warning] "] {font-weight: 太字;}
と
p[class~="urgent"] {font-weight: 太字;}
のいずれかを行うと、このpのフォントを太くすることができます。
このセレクターは、たとえば、イラストのスタイルを設定する場合、タイトルに「図」という文字列が含まれている場合 (title="図 5: xxx description" など)、img[title~] を使用できます。 ="図"]。
[title]: title 属性を持つ要素を選択します
php.cn 标题
这是内容
标题
这是内容
[title='hello']: 属性 title と値 hello
php.cn 标题
这是内容
标题
这是内容
[title*]を持つ要素を選択します= 'hello']: 選択された属性はタイトルであり、hello
php.cn 标题
这是内容
标题
这是内容
