CSS3浏览器私有前缀 && 新增的属性选择器

1、CSS3各大浏览器私有前缀

-webkit- 谷歌、Safari
-moz- FireFox
-ms- IE浏览器
-o- Opera浏览器

---

2、CSS3属性选择器

① 选择所有带有x属性的元素：[属性名]

比如选择所有带有 name2 属性的元素：[name2] {...}

---

②选择所有 x属性 = y属性值 的元素：[x = "y"]

比如选择所有 类名为 box 的元素：[class="box"] {...}

---

③选择所有含有 x属性 且属性值是以 y- 开头的元素：[x |= "y"]

比如选择所有 含有 type 属性 ，且 属性值是以 data- 开头 的元素：
 
[type |= "data"] {...}
 
以data开头，但是没有横线的则不会选中

---

④选择所有含有 x属性 且属性值是以 y 开头的元素：[x ^= "y"]

比如选择所有 含有 name3 属性 ，且 属性值是以 get 开头 的元素：
 
[name3 ^= "get"] {...}

---

⑤选择所有含有 x属性 且属性值是以 y 结尾的元素：[x $= "y"]

比如选择所有 含有 href 属性 ，且 属性值是以 com 结尾 的元素：
 
[href $= "com"] {...}

---

⑥选择所有含有 x属性 且属性值 包含y字符 的元素：[x *= "y"]

比如选择所有 含有 idCard 属性 ，且 属性值中包含 Zhang 的元素：
 
[idCard *= "Zhang"] {...}