CSSプロパティセレクター
1. 屬性セレクターとは
屬性セレクターとは、htmlの屬性タグをセレクターとして使用することを指し、その機(jī)能は、指定された屬性を持つHTML要素にスタイルを設(shè)定することです。
屬性セレクターは、class 屬性や id 屬性だけでなく、指定された屬性を持つ HTML 要素のスタイルを設(shè)定できます。
注意: IE ブラウザを使用している場(chǎng)合、屬性の選択は IE6 以前のバージョンではサポートされていません。 IE7 は、!DOCTYPE が指定されている場(chǎng)合にのみ屬性セレクターの使用をサポートします。
2. 屬性セレクターの構(gòu)文
次の例では、屬性セレクターは [] で表示され、title 屬性を持つすべての要素のスタイルを設(shè)定します。
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 などの要素のすべての正當(dāng)な屬性にすることができるため、img[alt]{css 宣言はここに;} は alt 屬性を持つ任意の img に作用します。要素。 [href][title] {font-weight:old;} はどうでしょうか?賢明な方であれば、これが <a title="php Home"> などの href 屬性と title 屬性の両方を持つ a 要素に影響を與えることをすでにご存知のはずです。 /a> 。正確な屬性値セレクター
id と class は本質(zhì)的に正確な屬性値セレクターです。はい、h1#logo は h1[id="logo"] と同じです。前に述べたように、ID やクラスに限定されず、任意の屬性を使用できます。たとえば、a[W3C Home"] {font-size: 200%;} は <a で動(dòng)作します。 /" title="php ホーム"></a>。部分屬性値セレクター
その名前が示すように、屬性値が部分的に一致する限り（ここでの部分は実際には単語(yǔ)全體と一致します）、要素に作用します。例を見(jiàn)てみましょう:
<p class="緊急警告">プルトニウムを取り扱うときは、臨界量の形成を避けるように注意する必要があります。</p>p[class~= warning] "] {font-weight: 太字;} と
p[class~="urgent"] {font-weight: 太字;}
のいずれかを行うと、このpのフォントを太くすることができます。
このセレクターは、たとえば、イラストのスタイルを設(shè)定する場(chǎng)合、タイトルに「図」という文字列が含まれている場(chǎng)合 (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 = "屬性選擇器">標(biāo)題<h1>
<p>這是內(nèi)容</p>
<h1>標(biāo)題<h1>
<p>這是內(nèi)容</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 = "屬性選擇器">標(biāo)題<h1>
<p>這是內(nèi)容</p>
<h1 title = "hello">標(biāo)題<h1>
<p>這是內(nèi)容</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">標(biāo)題<h1>
<p>這是內(nèi)容</p>
<h1 title = "hello css">標(biāo)題<h1>
<p>這是內(nèi)容</p>
</body>
</html>
