CSS 屬性 選擇器
CSS?屬性?選擇器
CSS 2 引進(jìn)了屬性選擇器。
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。
?(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1：?[att*=val];解釋：如果元素用att表示的屬性之屬性值中包含用val指定的字符的話，則該元素使用這個(gè)樣式.
<html>
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999">
</p>
</body>
</html>運(yùn)行效果：除了ie其他均能正常顯示。 。
?2:[att^=val];解釋：如果元素用att表示的屬性之屬性值的開頭為用val指定的字元的話，則該元素使用這個(gè)樣式。 (其實(shí)你可以這樣理解在正則裡面^匹配開頭嘛所以嘍。。)
?運(yùn)行效果：除了ie其他均能正常顯示。 。
3:[att$=val];解釋：如果元素用att表示的屬性之屬性值的結(jié)尾為用val指定的字元的話，則該元素使用這個(gè)樣式。 (在正規(guī)裡面$符合結(jié)尾。。)
?運(yùn)作效果：除了ie其他皆能正常顯示。 。?
下面再看一個(gè)範(fàn)例:
<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>運(yùn)作效果：除了ie其他皆能正常顯示。 。
