CSS3 選擇器 屬性選擇器介紹

從上一節(jié)展示的CSS3選擇器的圖表中,我們可以知道,CSS3的屬性選擇器主要包括以下幾種:
E[attr]:只使用屬性名,但沒(méi)有確定任何屬性值;
E[attr="value"]:指定屬性名,并指定了該屬性的屬性值;
E[attr~="value"]:指定屬性名,并且具有屬性值,此屬性值是一個(gè)詞列表,并且以空格隔開,其中詞列表中包含了一個(gè)value詞,而且等號(hào)前面的“〜”不能不寫;
E[attr^="value"]:指定了屬性名,并且有屬性值,屬性值是以value開頭的;
E[attr$="value"]:指定了屬性名,并且有屬性值,而且屬性值是以value結(jié)束的;
E[attr*="value"]:指定了屬性名,并且有屬性值,而且屬值中包含了value;
E[attr|="value"]:指定了屬性名,并且屬性值是value或者以“value-”開頭的值(比如說(shuō)zh-cn);
為了更好的說(shuō)明CSS3屬性選擇器的使用方法,我們把第一節(jié)的demo換成別的結(jié)構(gòu),如下所示:
<div class="demo clearfix">
<a 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>
初步美化一下上面的代碼
.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;
}
最初效果如下所示:
下面就開始針對(duì)上面列出的每個(gè)屬性選擇器來(lái),具體分析其使用方法。
一、E[attr]
E[attr]屬性選擇器是CSS3屬性選擇器中最簡(jiǎn)單的一種。如果你希望選擇有某個(gè)屬性的元素,而不論這個(gè)屬性值是什么,你就可以使用這個(gè)屬性選擇器,如:
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
上面代碼所表示的,選擇了div.demo下所有帶有id屬性的a元素,并在這個(gè)元素上使用背景色為蘭色,前景色為黃色,字體加粗的樣式,對(duì)照上面的html,我們不難發(fā)現(xiàn),只有第一個(gè)和最后一個(gè)鏈接使用了id屬性,所以選中了這兩個(gè)a元素,效果如下所示:
上面是單一屬性的使用,你也可以使用多屬性進(jìn)行選擇元素,如E[attr1][attr2], 這樣只要是同時(shí)具有這兩屬性的元素都將被選中:
不用我說(shuō),上面的代碼大家都知道是什么意思了,他表示的是選擇div.demo下的同時(shí)具有href,title兩個(gè)屬性的a元素,并且應(yīng)用相對(duì)應(yīng)的樣式,如下所示:
IE6不支持這個(gè)選擇器。
二、E[attr="value"]
E[attr="value"]選擇器和E[attr]選擇器,從字面上就能很清楚的理解出來(lái),E[attr="value"]是指定了屬性值“value”,而E[attr]只是選擇了有對(duì)應(yīng)的屬性,并沒(méi)有明確指其對(duì)應(yīng)的屬性值"value",這也是這兩種選擇器的最大區(qū)是之處。從而縮小了選擇 圍,更能精確選擇自己需要的元素,在前面實(shí)例基礎(chǔ)上我們進(jìn)行一下簡(jiǎn)單的修改:
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
和前面代碼相比較,此處在id的屬性基礎(chǔ)上指定了相應(yīng)的value值為“first”,這樣一來(lái)我們選中的是div.demo中的a元素,并且這個(gè)元素有一個(gè)"id="first""屬性值,請(qǐng)看下在的效果圖:
E[attr="value"]屬性選擇器也可以多個(gè)屬性并寫,進(jìn)一步縮小選擇范圍:
效果如下:
對(duì)于E[attr="value"]這種屬性值選擇器有一點(diǎn)需要注意:屬性和屬性值必須完全匹配,特別是對(duì)于屬性值是詞列表的形式時(shí),如:
<a href="" class="links item" title="open the website">7</a>
例如上面的代碼,如果你寫成:
.demo a[class="links"]{color:red};/*這是一種寫法不能和上面的html所匹配*/
上面的屬性選擇器并不會(huì)和上在的html匹配,因?yàn)樗麄兊膶傩院蛯傩灾禌](méi)有完全匹配,需要改成如下所示的代碼,才能正確匹配:
.demo a[class="links item"]{color:red};/*這樣才是匹配的,記得中間的空格不能少的喲*/
IE6瀏覽器不支持這種選擇器。
三、E[attr~="value"]
如果你想根據(jù)屬性值中的詞列表的某個(gè)詞來(lái)進(jìn)行選擇元素,那么就需要使用這種屬性選擇器:E[attr~="value"],這種屬性選擇器是屬性值是一個(gè)或多個(gè)詞列表,如果是列表時(shí),他們需要用空格隔開,只要屬性值中有一個(gè)value相匹配就可以選中該元素,而我們前面所講的E[attr="value"]是屬性值需要完全匹配才會(huì)被選中,他們兩者區(qū)別就是一個(gè)有“〜”號(hào),一個(gè)沒(méi)有“〜”號(hào)。我們來(lái)看一個(gè)這方面的實(shí)例:
.demo a[title~="website"]{background:orange;color:green;}
上面代碼表示的是,div.demo下的a元素的title屬性中,只要其屬性值中含有"website"這個(gè)詞就會(huì)被選擇,回頭看看我們的html,不難發(fā)現(xiàn)所有a元素中“2,6,7,8”這四個(gè)a元素的title中都含有,所以被選中,請(qǐng)看效果:
如果我們?cè)谏厦娴拇a中,把那個(gè)“〜”號(hào)省去,大家看看他們不同之處:
.demo a[title="website"]{background:orange;color:green;}
這樣將不會(huì)選擇中任何元素,因?yàn)樵谒衋元素中無(wú)法找到完全匹配的"title='website'",換句話說(shuō)就沒(méi)有選中任何元素,效果如下:
這個(gè)實(shí)例再次證明了E[attr="value"]和E[attr~="value"]之間的區(qū)別,和其中“〜”所取的作用,我總結(jié)了一句話:屬性選擇器中有波浪(〜)時(shí)屬性值有value時(shí)就相匹配,沒(méi)有波浪(〜)時(shí)屬性值要完全是value時(shí)才匹配。
IE6不支持E[attr~="value"]屬性選擇器。
四、E[attr^="value"]
E[attr^="value"]屬性選擇器,指的是選擇attr屬性值以“value”開頭的所有元素,換句話說(shuō),選擇的屬性其以對(duì)應(yīng)的屬性值是以“value”開始的,一起來(lái)看個(gè)實(shí)例:
.demo a[href^="http://"]{background:orange;color:green;}
.demo a[href^="mailto:"]{background:green;color:orange;}
上面代碼表示的是選擇了以href屬性,并且以"http://"和"mailto:"開頭的屬性值的所有a元素,換過(guò)更簡(jiǎn)單一點(diǎn)的呢?只要a元素中的href屬性值是以"http://"或"mailto:"開頭的a元素都會(huì)以選中,那么下面大家請(qǐng)對(duì)照上面的html和下面的效果圖,看看是不是那么一回事:
IE6不支持E[attr^="value"]選擇器。
五、E[attr$="value"]
E[attr$="value"]屬性選擇器剛好與E[attr^="value"]選擇器相反,E[attr$="value"]表示的是選擇attr屬性值以"value"結(jié)尾的所有元素,換句話說(shuō)就是選擇元素attr屬性,并且他的屬性值是以value結(jié)尾的,這個(gè)運(yùn)用在給你一些特殊的鏈接加背景圖片很方便的,比如說(shuō)給pdf,png,doc等不同文件加上不同icon,我們就可以使用這個(gè)屬性來(lái)實(shí)現(xiàn),如:
.demo a[href$="png"]{background:orange;color:green;}
上面代碼表示的是,選擇div.demo中元素有href屬性,并以png值結(jié)尾的a元素。(正如上面所說(shuō),只不過(guò)這里使用的是改變?cè)氐谋尘吧?,效果如下?
IE6不支持E[attr$="value"]屬性選擇器。
六、E[attr*="value"]
E[attr*="value"]屬性選擇器表示的是選擇attr屬性值中包含子串"value"的所有元素。也就是說(shuō),只要你所選擇的屬性,其屬性值中有這個(gè)"value"值都將被選中,如:
上面代碼表示的是:選擇了div.demo中a元素,而a元素的title屬性中只要有"site"就符合選擇條件。效果如下:
IE6不支持E[attr*="value"]選擇器。
七、E[attr|="value"]
E[attr|="value"]是屬性選擇器中的最后一種,在說(shuō)這個(gè)選擇器使用之前先提醒大家attr后面的是一個(gè)豎線“|”而不是l,小心搞錯(cuò)了。E[attr|="value"]被稱作為特定屬性選擇器。這個(gè)選擇器會(huì)選擇attr屬性值等于value或以value-開頭的所有元素,我們來(lái)看個(gè)實(shí)例:
上面的代碼會(huì)選中了div.demo中l(wèi)ang屬性等于zh或以zh-開頭的所有a元素,大家可以對(duì)照前面的html代友,其中"2,3,4,6"被選中,因?yàn)樗麄兌加幸粋€(gè)lang屬性,并且他們的屬性值都符合以"zh"或"zh-"開始的元素。具體效果如下:
所以這種屬性選擇器用來(lái)匹配以“女value-1”,"value-2"的屬性是很方便的,比如說(shuō)你頁(yè)面中有很多圖片,圖片文件名都是以"figure-1","figure-2"這樣的方式來(lái)命名的,那么使用這種選擇器選中圖片就很方便了,大家可以在本地嘗試一下,這種屬性選擇器最常常用的地方是如上面的示例用來(lái)匹配語(yǔ)言。
IE6不支持E[attr|="value"]選擇器。
有關(guān)于屬性選擇器就上面這些內(nèi)容了,屬性選擇器除了IE6不支持外,其他的瀏覽器都能支持,這樣一來(lái),如果你在你的頁(yè)面上使用了屬性選擇器,而且你需要處理ie6兼容問(wèn)題,那你就需要確保IE6用別的方法來(lái)實(shí)現(xiàn)或者你應(yīng)該確保IE6用戶將能獲得一個(gè)可用的頁(yè)面。七種屬性選擇器中E[attr="value"]和E[attr*="value"]是最實(shí)用的,其中E[attr="value"]能幫我們定位不同類型的元素,特別是表單form元素的操作,比如說(shuō)input[type="text"],input[type="checkbox"]等,而E[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件,比如說(shuō)你的網(wǎng)站上不同的文件類型的鏈接需要使用不同的icon圖標(biāo),用來(lái)幫助你的網(wǎng)站提高用戶體驗(yàn),就像前面的實(shí)例,可以通過(guò)這個(gè)屬性給".doc",".pdf",".png",".ppt"配置不同的icon圖標(biāo)。
到這里,CSS3的屬性選擇器就介紹完了,下一節(jié)將主要介紹CSS3的偽類選擇器,特別是其中的nth-child選擇器,將是CSS3選擇器中最有吸引力的一部分,大家如果感興趣的話,請(qǐng)觀注本站的有關(guān)更新吧。讓我們一起期待CSS3的無(wú)窮力量。
如需轉(zhuǎn)載煩請(qǐng)注明出處:W3CPLUS
相關(guān)文章
CSS 屬性選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式??梢詾閾碛兄付▽傩缘?HTML 元素設(shè)置樣式,而不僅限于 class 和 id 屬性。下文給大家介紹了css屬性選擇器的相關(guān)知識(shí),感興趣的朋友一2017-06-22- 本文總結(jié)了30個(gè)CSS3選擇器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-13
- 下面小編就為大家?guī)?lái)一篇全面了解css 屬性選擇器。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-20
- CSS3的諸多革命性改進(jìn)中,對(duì)屬性選擇器的增強(qiáng)絕對(duì)是亮點(diǎn)之一,這里我們就來(lái)詳解CSS3中屬性選擇器新增加的特性,需要的朋友可以參考下2016-07-11
- 本篇文章給大家介紹css3選擇器的使用方法匯總,包括通用選擇器,屬性選擇器,偽類選擇器,對(duì)css3選擇器相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-24
CSS屬性簡(jiǎn)寫和選擇器的優(yōu)先級(jí)問(wèn)題
這篇文章主要介紹了CSS屬性簡(jiǎn)寫和選擇器的優(yōu)先級(jí)問(wèn)題,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-15CSS屬性選擇器的四種格式-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
屬性選擇器(AttributeSelectors),或許你不應(yīng)該對(duì)屬性選擇器感到陌生,從本質(zhì)上說(shuō),id跟類選擇器其實(shí)就是屬性選擇器,只不過(guò)是選擇了id或者類的值(value)而已。2008-10-17css對(duì)邊框的屬性控制和鏈接的偽類選擇器-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文:http://jorux.com/archives/property-3-if-you-love-css/ 本篇主要介紹css對(duì)邊框(border)的屬性控制和鏈接(link)的偽類選擇器. 邊框(border): css控制的邊框?qū)?/div> 2008-10-17CSS屬性選擇器非常神奇,它們可以幫你避免添加數(shù)不勝數(shù)的類名,從另一方面來(lái)指出你代碼里的一些問(wèn)題。接下來(lái)通過(guò)本文給大家介紹使用CSS屬性選擇器來(lái)拼接HTML的DNA的方法,2018-11-02最新評(píng)論