CSSプロパティセレクター
CSS 屬性セレクター
CSS 2 では屬性セレクターが導(dǎo)入されました。
屬性セレクターは、屬性と屬性値に基づいて要素を選択できます。
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1: [att*=val];説明: element att で表される屬性の屬性値に val で指定された文字が含まれている場合、その要素はこのスタイルを使用します。
<html>
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999">
</p>
</body>
</html>動作効果: IE 以外は正常に表示されます。 。
2:[att^=val];説明: att で表される要素の屬性値が val で指定された文字で始まる場合、要素はこのスタイルを使用します。 (実際には、正規(guī)表現(xiàn)では ^ が先頭と一致することがわかりますが…)
動作効果: IE 以外は正常に表示されます。 。
3:[att$=val];説明: att で表される要素の屬性の屬性値が val で指定された文字で終わる場合、要素はこのスタイルを使用します。 (正規(guī)表現(xiàn)では $ が末尾と一致します...)
実行効果: IE を除いて、その他はすべて正常に表示されます。 。
別の例を見てみましょう:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web網(wǎng)頁";
color:red;
}
a[href$=jpg]:after{
content:"JPG圖像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css選擇器</a></li>
<li><a href="#">圖像素材</a></li>
</ul>
</body>
</html> 動作効果: IE を除いて、他のすべては正常に表示されます。 。
