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

2021-03-12 03:15 jianzhan
特性挑选器早在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换为其他构造,以下所示:

拷贝编码
编码以下:

<div class="demo clearfix">
<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
<a href="" class="links item" title="open the website" lang="cn">7</a>
<a href="" class="links item" title="close the website" lang="en-zh">8</a>
<a href="" class="links item" title="http://www.sina.com">9</a>
<a href="" class="links item last" id="last">10</a>
</div>

基本清理1下上面的编码

拷贝编码
编码以下:

.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}

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

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

拷贝编码
编码以下:

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

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

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

拷贝编码
编码以下:
.demo a[href][title] {background: yellow; color:green;}

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

IE6不适用这个挑选器。

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

拷贝编码
编码以下:

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

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

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

拷贝编码
编码以下:
.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}

实际效果以下:

 针对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起看来个案例:


拷贝编码
编码以下:

.demo a[href^="http://"]{background:orange;color:green;}
.demo a[href^="mailto:"]{background:green;color:orange;}

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

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

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

拷贝编码
编码以下:

.demo a[href$="png"]{background:orange;color:green;}

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

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

6、E[attr*="value"]

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


拷贝编码
编码以下:
.demo a[title*="site"]{background:black;color:white;}

上面编码表明的是:挑选了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-开始的全部元素,大家看来个案例:


拷贝编码
编码以下:
.demo a[lang|="zh"]{background:gray;color:yellow;}

上面的编码会选定了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