CSS属性选择器

简单属性选择（E[attr]）

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

img[alt] {
    border: 1px solid #000;
}

上面代码所表示的是对所有带有 alt 属性的图像应用样式。这是对单一属性的运用，你也可以进行多属性的运用：

img[alt][title] {
    border: 1px solid #000;
}

上面代码表示的是对同时具有 alt 属性和 title 属性的图片应用相应的样式。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

根据具体属性值选择（Ｅ[attr=”value”]）

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

p[class="demo"] {
    color: #fff;
    background: red;
}

上面代码表示的是对 class 属性是 demo 的 段落元素应用相应的样式。Ｅ[attr=”value”] 属性选择器也可以多个属性并写，进一步缩小选择范围：

<a href="http://blog.csdn.net/man_tutu" title="mantutu">mantutu</a>

a[href="http://blog.csdn.net/man_tutu"][title] {
    text-decoration: none;
}

请注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。

对于如下HTML代码：

<p class="demo important">demo</p>

如果写成如下：

p[class="demo"] {
    background: red;
    color: #fff;
}

上面的代码就无法对相应的 HTML 代码起到作用，因为他们的属性和属性值没有完全匹配。必须要写成如下代码，才能起到作用：

p[class="demo important"] {
    background: red;
    color: #fff;
}

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

根据部分属性值选择（E[attr~=”value”]）

如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~=”value”]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个 value 相匹配就可以选中该元素，而我们前面所讲的 E[attr=”value”] 是属性值需要完全匹配才会被选中，他们两者区别就是一个有“~”号，一个没有“~”号。

<p class="demo important">demo</p>

p[class~="demo"] {
    background: red;
    color: #fff;
}

上面的代码表示的是，p 元素的 class 属性中，只要包含有 demo 这个词就会被选中，并且应用相应的样式。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

子串匹配属性选择器（E[attr^=”value”]）

选择 attr 属性值以“value”开头的所有元素。

a[href^="https"] {
    background: red;
    color: #fff;
}

只要 a 元素中的 href 属性值是以“https”开头的 a 元素都会被选中。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

子串匹配属性选择器（E[attr$=”value”]）

Ｅ[attr$=”value”] 属性选择器刚好与 E[attr^=”value”] 选择器相反，E[attr$=”value”] 表示的是选择 attr 属性值以“value”结尾的所有元素。

a[href$="com"] {
    background: red;
    color: #fff;
}

上面代码表示的是只要 a 元素中的 href 属性值是以“com”结尾的 a 元素都会被选中。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

子串匹配属性选择器（E[attr*=”value”]）

E[attr*=”value”] 属性选择器表示的是选择 attr 属性值中包含子串“value”的所有元素。也就是说，只要你所选择的属性，其属性值中有这个“value”值都将被选中。

a[href*="www"] {
    background: red;
    color: #fff;
}

上面代码表示的是只要 a 元素的 href 属性中只要包含有“www”就符合选择条件。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

特定属性选择类型（E[attr|=”value”]）

E[attr|=”value”] 被称作为特定属性选择器。这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

*[lang|="en"] {color: red;}

上面这段代码表示会选中 lang 属性等于 en 或以 en- 开头的所有元素，并且应用相应的样式。

兼容性：
1. IE 7+
2. Firefox
3. Chrome
4. Safari
5. Opera

所有的属性选择器除了 IE6 不支持以外，其他浏览器都能够支持。