CSSプロパティセレクター

CSS 属性セレクター

CSS 2 では属性セレクターが導入されました。

属性セレクターは、属性と属性値に基づいて要素を選択できます。

(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 で指定された文字で始まる場合、要素はこのスタイルを使用します。 (実際には、正規表現では ^ が先頭と一致することがわかりますが…)

動作効果: IE 以外は正常に表示されます。。

3:[att$=val];説明: att で表される要素の属性の属性値が val で指定された文字で終わる場合、要素はこのスタイルを使用します。 (正規表現では $ が末尾と一致します...)

実行効果: 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网页";
    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 を除いて、他のすべては正常に表示されます。。

学び続ける

新しいファイル

<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网页"; 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>

提出するリセットコード

自動運転