核心提示：CSS选择器-属性选择器简单属性选择h1[class] {color: red;}HelloSerenity 在XML文档中，属性原则器相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属...
CSS选择器-属性选择器
简单属性选择
h1[class] {color: red;}
Hello
Serenity
在XML文档中，属性原则器相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。
选择以后moons属性的所有planet元素，使之显示为粗体，以便能更关注有moons的行星:
planet[moons] {font-weight: bold;}
Venus
Earth
Mars
还可以根据多个属性进行选择，只需要将属性选择器链接在一起即可。
同时将有href和title属性的HTML超链接文本设置为粗体:
a[href][title] {font-weight: bold;}
以下标记只有第一个链接变成粗体:
W3C Standards Info dead.letter
根据具体属性值选择
planet[moons="1"] {font-weight: bold;}
Venus
Earth
Mars
需要注意的是，这种格式要求必须与属性值完全匹配。如果遇到的值本身包含一个用空格分隔的值列表，匹配就会出问题。要根据具体的属性值匹配这个元素，唯一写法：
Mercury planet[type="barren rocky"] {font-weight: bold;}
根据部分属性值选择
When handling plutonium, care must be taken to avoid the formation of a critical mass.
选择class属性中包含warning的元素:
p[class~="warning"] {font-weight: bold;}
等价于点号类名记法: p.warning 和 p[class~="warning"] 应用到HTML文档中是等价的。
子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [foo^=”bar”] | 选择foo属性值以”bar”开头的所有元素 |
| [foo$=”bar”] | 选择foo属性值以”bar”结尾的所有元素 |
| [foo*=”bar”] | 选择foo属性值中包含子串”bar”的所有元素 |
目前只有Safari、基于Gecko的游览器、Opera和IE7/Win对这种子串选择器提供支持。
特定属性选择类型
*[lang|="en"] {color: white;}
常用于匹配语言值，但可以用于任何属性及其值。选择lang属性等于en或者以en-开头的所有元素。
