CSS3中属性选择器使用方法详解
注释：
一、属性选择器除了IE6不支持外，其他的浏览器都能支持。
二、E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。
CSS3中新增了许多选择器，今天零度给大家说说CSS3的属性选择器。
与CSS2相比，CSS3新增了3种属性选择器：[attr^=value]、[attr$=value]、[attr*=value]；分别来讲解一下。
一、[attr^=value]属性选择器
大家如果接触过正则表达式的话，应该知道^符号的意思，是表示开头，没错，这里也是表示开头的意思，意思就是选择属性名attr的开头值为value的元素！
举个例子：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy9758')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9758>
<style type="text/css">
[class^=tea]{width:200px; height:200px;} /*此选择器表示选择class开头字符串为tea的元素*/
</style>
<div class="teacher">我的class是teacher</div>
<div class="tea">我的class是tea</div>
<div class="teach">我的class是teach</div>
<div class="aaa">我的class是aaa</div>
这样会选择前三个元素，而不会选择最后一个元素。
二、[attr$=value]属性选择器
相比较前一个，这一个就很容易理解了，$符号就代表结尾，这里意思是选择属性名attr的结尾值为value的元素！
例子：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5258')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5258><style type="text/css">
[class$=er]{width:200px; height:200px;} /*此选择器表示选择class结尾字符串为er的元素*/
</style>
<div class="teacher">我的class是teacher</div>
<div class="tea">我的class是tea</div>
<div class="teach">我的class是teach</div>
<div class="aaa">我的class是aaa</div>
这样就会选择class为teacher的div。
三、[attr*=value]属性选择器
最后这一个和前面两个的区别是符号换成了*，这个代表通配符的意思，意思是选择属性名attr的值包含value的元素！
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7511')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7511>
<style type="text/css">
[class$=ch]{width:200px; height:200px;} /*此选择器表示选择class包含字符串为ch的元素*/
</style>
<div class="teacher">我的class是teacher</div>
<div class="tea">我的class是tea</div>
<div class="teach">我的class是teach</div>
<div class="aaa">我的class是aaa</div>
这样就会选择class为teacher和class为teach的两个div。
这三种属性选择器大家如果用的熟练的话会对提高工作效率有很大帮助。
您可能感兴趣的文章：
CSS3中属性选择器使用方法详解
CSS3的default伪类选择器使用详解
css的选择器的详细介绍
细说 jQuery 元素篇（二） – 选择符
CSS3混合模式使用详解
一个简单的CSS3动画样式
Jquery实战_读书笔记2 选择器
HTML5必读书籍
Jquery 学习笔记（二）
jquery选择器大全详解