深山老林

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/2286256.html

在CSS的选择符中，除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”，试了一下属性选择符，感觉很不错，如果使用到页面中的话，会让CSS的定义更加的强大，可惜现在IE并不支持这一选择符。

属性选择符可分为下面几种：

Attribute Selectors
E[attr] 属性选择符。
选择具有attr属性的E。

Attribute Selectors
E[attr=value] 属性选择符。
选择具有attr属性且属性值等于value的E。

Attribute Selectors
E[attr~=value] 属性选择符。
选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E。

Attribute Selectors
E[attr|=value] 属性选择符。
选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E。

下面看看例子：

--------------------HTML code----------------------
<div class="demo">E[attr=value] 属性选择符</div>
<div title="Attribute Selectors">E[attr] 属性选择符</div>
<h1 class="dem demo">E[attr~=value] 属性选择符</h1>
<h2 class="demo-demo2">E[attr|=value] 属性选择符</h2>
---------------------------------------------------

--------------------CSS code-----------------------
body{line-height:1.3em;color:#000000;}
.demo-demo2{background-color:#FFA500;}
div[title]{color:#FFFFFF;background-color:#0000FF;}
div[class=demo]{color:#FF0000;}
h1[class~=demo]{color:#0000FF;}
h2[class|=demo]{color:#008000;}
---------------------------------------------------