CSS 3,选择器之属性选择器

CSS 3中增加了下面三种属性选择器

1、[att*=val]

如果元素用att表示的属性值中包含val,则该元素使用这个样式。

eg. [id*=section]{background-color:red;} //像 id = "subsection"等id包含section的元素都使用这个样式

2、[att^=val]

如果元素用att表示的属性值的开头字符为val,则该元素使用这个样式。 

eg. [id^=section]{background-color:red;} //像 id = "section2"等id以section开头的元素都使用这个样式 

3、[att$=val]

如果元素用att表示的属性值的结尾字符为val,则该元素使用这个样式。 

eg. [id^=\-1]{background-color:red;} //像 id = "section-1"等id以-1结束的元素都使用这个样式。注:改属性选择器中必须在指定匹配字符前加上"\"这个转义字符。

 

灵活运用属性选择器例子:

 

View Code 
  1 <!DOCTYPE html>
 2 <head>
 3 <meta charset = "UTF-8" />
 4 <title>Web Storage示例</title>
 5 <style type="text/css">
 6 a[href$=\/]:after,a[href$=htm]:after
 7 
{
 8     content
:"WEB图像";
 9     color
:red;
10 
}
11 
12 a[href$=jpg]:after
13 
{
14     content
:"JPEG图像文件";
15     color
:green;
16 
}    
17 
</style>
18 
19 </head>
20 <body>
21 <ul>
22     <li><href="http://www.baidu.com/" >百度一下,你就知道</a></li>
23     <li><href="http://Lulingniu/css 3.htm">css 3的新特征</a></li>
24     <li><href="photo.jpg">图像素材</a></li>
25 </ul>
26 </body>
27 </html>

 

 

效果图:

 

 

posted @ 2011-11-24 14:59  直来直往  阅读(161)  评论(0编辑  收藏  举报