css属性选择器

css2引入了属性选择器，它可以根据元素的属性以及属性值来选择元素。共有4中类型的属性选择器：

1. 简单属性选择

<h1 class=""></h1>
h1[class] {}

<planet moons=""></planet>
planet[moons] {}

<img alt="" />
img[alt] {}

*[title] {}

a[href][title] {}

2、根据具体属性值选择

a[href="..."] {}

planet[moons=""] {}

a[href=""] {}

这种格式要求必须与属性值完全匹配

3、根据部分属性值选择

p[class~=""] {}

img[title~="Figure"] {}

这个规则会选择title文本包含Figure的所有图象。因此，只要图片有“Figure”的title文本，就能匹配（Figure 位置不限）。

还有一个更高级的css选择模块，这是在css2完成之后发布的，其中包含更多的部分属性值选择器（或者按规范的说法，称之为“子串匹配属性选择器”）。这些属性选择器在很多现代浏览器中都得到了支持，包括IE7。

[foo^="bar"]     选择foo属性值以"bar"开头的所有元素
[foo$="bar"]     选择foo属性值以"bar"结尾的所有元素
[foo*="bar"]     选择foo属性值中包含子串"bar"的所有元素

4、特殊属性选择类型

*[lang|="en"] {}
这个规则会选择lang属性等于en或者以en-开头的所有元素，如en、en-us、en-au

img[src|="figure"] {}
这个规则会匹配形如figure-1.gif和figure-3.jpg