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-auimg[src|="figure"] {}这个规则会匹配形如figure-1.gif和figure-3.jpg