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