CSS3 挑选器 特性挑选器详细介绍

特性挑选器早在CSS2中就被引进了，其关键功效便是对带有特定特性的HTML 元素设定款式。应用CSS3特性挑选器，你能够只特定元素的某个特性，或你还能够另外特定元素的某个特性和其对应的特性值。

从上1节展现的CSS3挑选器的图表格中，大家能够了解，CSS3的特性挑选器关键包含下列几种：

E[attr]：只应用特性名，但沒有明确任何特性值；
E[attr="value"]：特定特性名，并特定了该特性的特性值；
E[attr~="value"]：特定特性名，而且具备特性值，此特性值是1个词目录，而且以空格分隔，在其中词目录中包括了1个value词，并且等号前面的“〜”不可以不写；
E[attr^="value"]：特定了特性名，而且有特性值，特性值是以value开始的；
E[attr$="value"]：特定了特性名，而且有特性值，并且特性值是以value完毕的；
E[attr*="value"]：特定了特性名，而且有特性值，并且属值中包括了value；
E[attr|="value"]：特定了特性名，而且特性值是value或以“value-”开始的值（例如说zh-cn）;
以便更好的表明CSS3特性挑选器的应用方式，大家把第1节的demo换为其他构造，以下所示：


基本清理1下上面的编码


最开始实际效果以下所示：

下面就刚开始对于上面列出的每一个特性挑选器来，实际剖析其应用方式。
1、E[attr]
E[attr]特性挑选器是CSS3特性挑选器中最简易的1种。假如你期待挑选有某个特性的元素，而无论这个特性值是甚么，你便可以应用这个特性挑选器，如：

上面编码所表明的，挑选了div.demo下全部带有id特性的a元素，并在这个元素上应用情况色为兰色，市场前景色为黄色，字体样式加粗的款式，对比上面的html，大家不难发现，仅有第1个和最终1个连接应用了id特性，因此选定了这两个a元素，实际效果以下所示：

上面是单1特性的应用，你还可以应用多特性开展挑选元素，如E[attr1][attr2], 这样要是是另外具备这两特性的元素都将被选定：

无需我说，上面的编码大伙儿都了解是甚么意思了，他表明的是挑选div.demo下的另外具备href,title两个特性的a元素，而且运用相对性应的款式，以下所示：

IE6不适用这个挑选器。

2、Ｅ[attr="value"]
E[attr="value"]挑选器和E[attr]挑选器，从字面上就可以很清晰的了解出来，E[attr="value"]是特定了特性值“value”，而E[attr]只是挑选了有对应的特性，并沒有确立指其对应的特性值"value"，这也是这两种挑选器的最大区是的地方。从而变小了挑选 围，更能精准挑选自身必须的元素，在前面案例基本上大家开展1下简易的改动：

和前面编码相较为，此处在id的特性基本上特定了相应的value值为“first”,这样1来大家选定的是div.demo中的a元素，而且这个元素有1个"id="first""特性值，请看下在的实际效果图：

E[attr="value"]特性挑选器还可以好几个特性并写，进1步变小挑选范畴：

实际效果以下：

 针对E[attr="value"]这类特性值挑选器有1点必须留意：特性和特性值务必彻底配对，非常是针对特性值是词目录的方式时，如：

<a href="" class="links item" title="open the website">7</a>
比如上面的编码，假如你写成：

.demo a[class="links"]{color:red};/*这是1种写法不可以和上面的html所配对*/
上面的特性挑选器其实不会和上在的html配对,由于她们的特性和特性值沒有彻底配对，必须改为以下所示的编码，才可以正确配对：

.demo a[class="links item"]{color:red};/*这样才是配对的，记得正中间的空格不可以少的哟*/
IE6访问器不适用这类挑选器。

3、E[attr~="value"]
假如你想依据特性值中的词目录的某个词来开展挑选元素，那末就必须应用这类特性挑选器：E[attr~="value"]，这类特性挑选器是特性值是1个或好几个词目录，假如是目录时，她们必须用空格分隔，要是特性值中有1个value相配对便可以选定该元素，而大家前面所讲的E[attr="value"]是特性值必须彻底配对才会被选定，她们二者差别便是1个有“〜”号，1个沒有“〜”号。大家看来1个这层面的案例：

.demo a[title~="website"]{background:orange;color:green;}
上面编码表明的是，div.demo下的a元素的title特性中，要是其特性值中含有"website"这个词就会被挑选，回过头看看大家的html，不难发现全部a元素中“2，6，7，8”这4个a元素的title中都含有,因此被选定，请看实际效果：

假如大家在上面的编码中，把那个“〜”号省去，大伙儿看看她们不一样的地方：

.demo a[title="website"]{background:orange;color:green;}
这样将不容易挑选中任何元素，由于在全部a元素中没法寻找彻底配对的"title='website'",换句话说就沒有选定任何元素，实际效果以下：

这个案例再度证实了E[attr="value"]和E[attr~="value"]之间的差别，和在其中“〜”所取的功效，我总结了1句话：特性挑选器中有波浪纹（〜）时特性值有value时就相配对，沒有波浪纹（〜）时特性值要彻底是value时才配对。

IE6不适用E[attr~="value"]特性挑选器。

4、E[attr^="value"]

E[attr^="value"]特性挑选器，指的是挑选attr特性值以“value”开始的全部元素，换句话说，挑选的特性其以对应的特性值是以“value”刚开始的，1起看来个案例：

上面编码表明的是挑选了以href特性，而且以"http://"和"mailto:"开始的特性值的全部a元素，换过更简易1点的呢？要是a元素中的href特性值是以"http://"或"mailto:"开始的a元素都会以选定，那末下面大伙儿请对比上面的html和下面的实际效果图，看看是否那末1回事：

IE6不适用E[attr^="value"]挑选器。

5、E[attr$="value"]
Ｅ[attr$="value"]特性挑选器恰好与E[attr^="value"]挑选器相反，E[attr$="value"]表明的是挑选attr特性值以"value"末尾的全部元素，换句话说便是挑选元素attr特性，而且他的特性值是以value末尾的，这个应用在给你1些独特的连接加情况照片很便捷的，例如说给pdf,png,doc等不一样文档再加不一样icon，大家便可以应用这个特性来完成，如：

上面编码表明的是，挑选div.demo中元素有href特性，并以png值末尾的a元素。（正如上面所说，只但是这里应用的是更改元素的情况色），实际效果以下：

IE6不适用E[attr$="value"]特性挑选器。

6、E[attr*="value"]

E[attr*="value"]特性挑选器表明的是挑选attr特性值中包括子串"value"的全部元素。也便是说，要是你所挑选的特性，其特性值中有这个"value"值都将被选定，如：

上面编码表明的是：挑选了div.demo中a元素，而a元素的title特性中要是有"site"就合乎挑选标准。实际效果以下：

IE6不适用E[attr*="value"]挑选器。

7、E[attr|="value"]

E[attr|="value"]是特性挑选器中的最终1种，在说这个挑选器应用以前先提示大伙儿attr后边的是1个竖线“｜”而并不是l，当心搞错了。E[attr|="value"]被称做为特殊特性挑选器。这个挑选器会挑选attr特性值等于value或以value-开始的全部元素,大家看来个案例：

上面的编码会选定了div.demo中lang特性等于zh或以zh-开始的全部a元素，大伙儿能够对比前面的html代友，在其中"2,3,4,6"被选定，由于她们都有1个lang特性，而且她们的特性值都合乎以"zh"或"zh-"刚开始的元素。实际实际效果以下：

因此这类特性挑选器用来配对以“女value⑴”,"value⑵"的特性是很便捷的，例如说你网页页面中有许多照片，照片文档名全是以"figure⑴","figure⑵"这样的方法来取名的，那末应用这类挑选器选定照片就很便捷了，大伙儿能够在当地尝试1下，这类特性挑选器最经常用的地区是如上面的示例用来配对語言。

IE6不适用E[attr|="value"]挑选器。

相关于特性挑选器就上面这些內容了，特性挑选器除IE6不适用外，别的的访问器都能适用，这样1来，假如你在你的网页页面上应用了特性挑选器，并且你必须解决ie6适配难题，那你就必须保证IE6用其他方式来完成或你应当保证IE6客户将能得到1个能用的网页页面。7种特性挑选器中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的特性挑选器就详细介绍完了，下1节将关键详细介绍CSS3的伪类挑选器，非常是在其中的nth-child挑选器，将是CSS3挑选器中最有吸引住力的1一部分，大伙儿假如感兴趣爱好的话，请观注本站的相关升级吧。让大家1起希望CSS3的无限能量。

如需转载烦请注明出处：W3CPLUS