CSS 屬性 選擇器LOGIN

CSS 屬性 選擇器

CSS 屬性 選擇器

CSS 2 引進了屬性選擇器。

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。


 (1)[att*=val]; (2)[att^=val];(3)[att$=val];

1: [att*=val];解釋:如果元素用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>
章節課件