css属性选择符

1 Element[attribute] css2

注

匹配（含有attribute）的元素
img[role-source] {
...
}
<img role-souece="..." src="..." />

2 Element[attribute="value"] css2

注

匹配（含有attribute="value"）的元素
img[role-source = "true"]  {
...
}
<img role-souece="true" src="..." />

3 Element[attribute~="value"] css2

注

匹配（含有attribute="... value ...."）的元素
其中至少有一个value值符合要求
img[class ~= "user"] {
...
}
<img class="big user black" src="..." />

4 Element[attribute|="value"] css2

注

匹配（attribute属性值包含以value-字符串开头）的元素
img[role-source |= "user"] {
  width: 100%;
  height: auto;
}
<img role-source="user-black smaller" src="..." />

5 Element[attribute^="value"] css3

注

匹配（以value开头的属性值）的元素

6 Element[attribute$="value"] css3

注

匹配（以value结尾的属性值）的元素
img[role-source $= "smaller"] {
  width: 100%;
  height: auto;
}
<img role-source="user-black smaller" src="..." />

7 Element[attribute*="value"] css3

注

匹配（attribute包含value字符串）的元素
img[role-source *= "smaller"] {
  width: 100%;
  height: auto;
}
<img role-source="user-black smaller" src="..." />

兼容浏览器版本

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
7.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+