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><a href="http://www.baidu.com/" >百度一下，你就知道</a></li>
23 <li><a href="http://Lulingniu/css 3.htm">css 3的新特征</a></li>
24 <li><a href="photo.jpg">图像素材</a></li>
25 </ul>
26 </body>
27 </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><a href="http://www.baidu.com/" >百度一下，你就知道</a></li>
23 <li><a href="http://Lulingniu/css 3.htm">css 3的新特征</a></li>
24 <li><a href="photo.jpg">图像素材</a></li>
25 </ul>
26 </body>
27 </html>
效果图：
