3、属性选择器
（1）格式：E[attr] E标签中带有attr属性
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为：.nav a[id] {background: blue; color:yellow;font-weight:bold;}
则：
如图所示：.nav a[id] 只对a标签中具有id属性的对象使用了新样式
（1）格式：E[attr=“value”] E标签中attr属性的值为value
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为：.nav a[id="first"] {background: blue; color:yellow;font-weight:bold;}
则：
如图所示：.nav a[id=“first”] 只对a标签中id属性等于first的值使用了新样式
（3）格式：E[attr~=value] E标签中attr属性的值包含value
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为：.nav a[title~="website"]{background:orange;color:green;}
则：
如图所示：.nav a[title~=“website”] 对a标签中title属性值中包含了website的所有对象使用了新样式
（4）格式：E[attr^=value] E标签中attr属性以value开头的值
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为：.nav a[title^="http://"]{background:orange;color:green;}
则：
如图所示：.nav a[title^=“http://”] 对a标签中title属性值以http://开头的对象使用了新样式
（5）格式：E[attr$=value] E标签中attr属性以value结尾的值
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为： .nav a[title$="site"]{background:black;color:white;}
则：
如图所示： .nav a[title$=“site”] 对a标签中title属性值以site结尾的对象使用了新样式
（6）格式：E[attr*=value] E标签中attr属性的值包含value （作用相当于：E[attr~=value]）
（7）格式：E[attr|=value] E标签中attr属性的值以value-开头或者仅为value
例：<body>
<div class="pic_box">
<img src="images/bg1.jpg">
<div class="nav">
<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a>
<a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="#5" class="links item" title="zh-cn">5</a>
<a href="#6" class="links item" title="website link" lang="zh">6</a>
<a href="#7" class="links item" title="open the website" lang="cn">7</a>
<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
<a href="#9" class="links item" title="http://www.baidu.com">9</a>
<a href="#10" class="links item last" id="last">10</a>
</div>
</div>
</body>
如样式为：.nav a[lang|="zh"]{background:gray;color:yellow;}
则：
如图所示： .nav a[lang|=“zh”] 对a标签中lang属性值以zh-开头或者仅为zh
的对象使用了新样式
