标签：
接上篇ｃｓｓ基础选择器，这部分主要总结一下ｃｓｓ属性选择器的用法。
属性选择器的作用：对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
话不多说：依然上代码。
.demo { margin: 50px auto; width: 300px; border: 1px solid #ccc; padding: 10px; } .over-flow{ overflow: hidden; } li { float: left; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: aqua; color: green; margin-right: 5px; list-style: none; }
<div class="demo">
<ul class="over-flow">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
得到如下效果
１、 E[attr]：只使用属性名，但没有确定任何属性值；
li[id]{
background: red;
}
选择li标签下面有id属性的元素，和这个属性值没关系
也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中
li[id][class]{
background: red;
}
2、Ｅ[attr="value"]
E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，而Ｅ[attr="value"]是指定了属性值“value”，从而缩小了选择 围，更能精确选择自己需要的元素。
li[id="four"][class="important"]{
background: red;
}
E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围：
此功能易错点：属性和属性值必须完全匹配，特别是对于属性值是多个的形式时，属性值必须全部列出。
比如下面这段代码：
li[id="two"][class="important"]{
background: red;
}
是没有效果的
只有全部列出属性值才可以，而且属性值的顺序也不能错。
li[id="two"][class="active important"]{
background: red;
}
3、E[attr~="value"]：与E[attr="value"]不同的是，他们两者区别就是一个有“?”号，一个没有“?”号，E[attr="value"]是属性值需要完全匹配才会被选中，而
E[attr~="value"]则是属性值中只要有一个值匹配就可选中。
li[class~="important"]{
background: red;
}
4、E[attr^="value"]指的是选择attr属性值以“value”开头的所有元素。
li[class^="active"]{
background: red;
}
5、E[attr$="value"]如果明白了第四个属性选择器，那么这个选择器则刚好相反。
这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon。
为了更好的说明，我们在结构中插入两个a连接
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
<li> <a href="sites/file/test.jpg" class="links item" title="this is a link" lang="zh-cn">11</a></li>
<li><a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">12</a></li>
li a[href$="jpg"]{
background: red;
}
a链接丑了一点，不过还是说明了问题。
6、E[attr*="value"]表示的是选择attr属性值中包含子串"value"的所有元素，
和E[attr~="value"]有相同的感觉。
li[class*="important"]{
background: red;
}
7、E[attr|="value"]特定属性选择器，首先attr后面的是一个竖线“｜”而不是l，这个选择器会选择attr属性值等于value或以value-开头的所有元素。
li a[lang|="zh"]{
background: red;
}
至此，关于css属性选择器部分基本就这么多了，要说明的一点是，属性选择器除了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图标。
下一节，主要总结下css选择器中第三部分。伪类选择器。
标签：
原文地址：http://www.cnblogs.com/zyj-vaf/p/5512778.html
