根据html元素的属性及属性的值来选择元素，分别增加了3种[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
1.根据属性或属性值选中标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a[title]{ font-size: 18px; color: red; } p[class] { background-color: #008000; } </style> </head> <body> <p>这是没有class属性的p标签</p> <p class="test">这是p标签</p> <a href="#" >这是没有tilte属性的a标签</a> <a href="#" title="链接">这是测试的a标签</a> </body> </html>
2.[att^=val]，att属性值包含前缀为value的字符串。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p[id^=fi]{ color: red; } p[id^=f]{ color: green; } p[class^=pc] { background-color: bisque; } img[name^=tit] { border: 1px solid #FF0000; } </style> </head> <body> <p id="first">这是第一个P标签</p> <p class="pclass">这是第一个P标签</p> <img src="" alt="这是一张图片" name="title" /> </body> </html>
3.[att$=val]，att属性值包含后缀为value的字符串。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p[id$=st]{ color: red; } p[id$=t]{ color: pink; } p[class$=ss] { background-color:gold; } img[name$=e] { border: 2px double #b469ff; } </style> </head> <body> <p id="first">这是第一个P标签</p> <p class="pclass">这是第一个P标签</p> <img src="" alt="这是一张图片" name="title" /> </body> </html>
4.[att*=val]，att属性值包含value为子字符串的字符串。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p[id*=ir]{ color: red; } p[id*=t]{ color: peru; } p[class*=ass] { background-color:cyan; } img[name*=e] { border: 2px dotted #61ff61; } </style> </head> <body> <p id="first">这是第一个P标签</p> <p class="pclass">这是第一个P标签</p> <img src="" alt="这是一张图片" name="title" /> </body> </html>
总结：CSS 属性选择器参考手册
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
参考文章：
http://caibaojian.com/w3c/css/css_syntax_attribute_selector.html