CSS 属性选择器

[attribute^ = value]：这是 css 属性选择器的一种 ，用来匹配属性值以指定值开头的每个元素。例如：

[class$="box"] { background : #81D8D0; }

表示设置 class 属性值以 "box" 结尾的所有元素(div、span、p、li等元素)的背景色，也就是说对<div class="first-box">,<span  class="second-box">,<p class="third-box">的元素都是有效的。

另一种情况如：

span [class$="box"] { background : #81D8D0; }

则表示设置 class 属性值以 "box" 结尾的 span 的元素(只作用于 span 元素)的背景色，也就是说对<div class = "first-box">和<p class = "third-box">的元素是无效的。在"[ ]"前加元素类别可以选择只对某一类元素进行样式设置。

除此之外，还有一些常用的css属性选择器如下：

1. [attribute^ = "one"]匹配属性值中以指定值-"one" 的开头每个元素
2. [attribute~ = "two"] 选取属性值中包含指定词汇-"two" 的元素
3. [attribute| = "three"]  选取带有以指定值-"three" 开头的属性值的元素，该值必须是整个单词
4. [attribute$ = "four"] 匹配属性值以指定值-"four" 结尾的每个元素
5. [attribute* = "five"] 匹配属性值中包含指定值-"five" 的每个元素

所有主流浏览器都支持 [attribute^ = value] 选择器。

注释：对于 IE8 及更早版本中的 [attribute^ = value]，必须声明 <!DOCTYPE>。