css选择器之好用的attribute选择器

原文

相信很多小伙伴在看别人文档的时候会看到一种这样的选择器，

[class^=”test”] { background:#ffff00; }

这种[attribute^=value]形式是什么意思呢？

这种选择器有几种表达方式，分别代表着不同的意思。
1、[attribute~=value] 选取属性值中包含指定词汇的元素
2、[attribute|=value] 选取带有以指定值开头的属性值的元素，该值必须是整个单词。
3、[attribute$=value] 匹配属性值以指定值结尾的每个元素
4、[attribute*=value] 匹配属性值中包含指定值的每个元素
5、[attribute^=value]匹配属性值以指定值开头的每个元素

这种选择器还有一种用法，如
div[class^=”test”]
//设置 class 属性值以 “test” 开头的所有 div 元素的背景色

重点是！！
上面的attribute（属性），不单单指的是class这个属性，对于其他的属性也照样可以用。如

[title] {color:red;}
//把有title的属性的元素的字样颜色设置为红色。

[title=w3school]{color:red;}
//把有title=w3school的属性的元素的字样颜色设置为红色。