CSS3 選擇器——屬性選擇器


屬性選擇器早在CSS2中就被引入了,其主要作用就是對帶有指定屬性的HTML 元素設置樣式。使用CSS3屬性選擇器,可以只指定元素的某個屬性,或者同時指定元素的某個屬性和其對應的屬性值。

CSS3的屬性選擇器主要包括以下幾種:

  1. E[attr]:只使用屬性名,但沒有確定任何屬性值;
  2. E[attr="value"]:指定屬性名,並指定了該屬性的屬性值;
  3. E[attr~="value"]:指定屬性名,並且具有屬性值,此屬性值是一個詞列表,並且以空格隔開,其中詞列表中包含了一個value詞,而且等號前面的“〜”不能不寫;
  4. E[attr^="value"]:指定了屬性名,並且有屬性值,屬性值是以value開頭的;
  5. E[attr$="value"]:指定了屬性名,並且有屬性值,而且屬性值是以value結束的;
  6. E[attr*="value"]:指定了屬性名,並且有屬性值,而且屬值中包含了value;
  7. E[attr|="value"]:指定了屬性名,並且屬性值是value或者以“value-”開頭的值(比如說zh-cn);

為了更好的說明CSS3屬性選擇器的使用方法,把第一節的demo換成別的結構,如下所示:

.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; }

最初效果如下所示:

下面就開始針對上面列出的每個屬性選擇器來,具體分析其使用方法。

一、E[attr]

E[attr]屬性選擇器是CSS3屬性選擇器中最簡單的一種。如果你希望選擇有某個屬性的元素,而不論這個屬性值是什么,你就可以使用這個屬性選擇器,如:

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

上面代碼所表示的,選擇了div.demo下所有帶有id屬性的a元素,並在這個元素上使用背景色為蘭色,前景色為黃色,字體加粗的樣式,對照上面的html,我們不難發現,只有第一個和最后一個鏈接使用了id屬性,所以選中了這兩個a元素,效果如下所示:

m

上面是單一屬性的使用,也可以使用多屬性進行選擇元素,如E[attr1][attr2], 這樣只要是同時具有這兩屬性的元素都將被選中:

 
        
			.demo a[href][title] {background: yellow; color:green;} 
 
        

表示的是選擇div.demo下的同時具有href,title兩個屬性的a元素,並且應用相對應的樣式,如下所示:

 
        

 
        

IE6不支持這個選擇器。

 
        

二、E[attr="value"]

 
        

E[attr="value"]選擇器和E[attr]選擇器,從字面上就能很清楚的理解出來,E[attr="value"]是指定了屬性值“value”,而E[attr]只是選擇了有對應的屬性,並沒有明確指其對應的屬性值"value",這也是這兩種選擇器的最大區是之處。從而縮小了選擇 圍,更能精確選擇自己需要的元素,在前面實例基礎上我們進行一下簡單的修改:

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

和前面代碼相比較,此處在id的屬性基礎上指定了相應的value值為“first”,這樣一來我們選中的是div.demo中的a元素,並且這個元素有一個"id="first""屬性值,請看下在的效果圖:

 
        

 
        

E[attr="value"]屬性選擇器也可以多個屬性並寫,進一步縮小選擇范圍:

 
        
			.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;} 
 
        

效果如下:

 
        

 
        

對於E[attr="value"]這種屬性值選擇器有一點需要注意:屬性和屬性值必須完全匹配,特別是對於屬性值是詞列表的形式時,如:

 
        
			<a href="" class="links item" title="open the website">7</a> 
 
        

例如上面的代碼,如果你寫成:

 
        
			.demo a[class="links"]{color:red};/*這是一種寫法不能和上面的html所匹配*/ 
 
        

上面的屬性選擇器並不會和上在的html匹配,因為他們的屬性和屬性值沒有完全匹配,需要改成如下所示的代碼,才能正確匹配:

 
        
			.demo a[class="links item"]{color:red};/*這樣才是匹配的,記得中間的空格不能少的喲*/ 
 
        

IE6瀏覽器不支持這種選擇器。

 
        

三、E[attr~="value"]

 
        

如果你想根據屬性值中的詞列表的某個詞來進行選擇元素,那么就需要使用這種屬性選擇器:E[attr~="value"],這種屬性選擇器是屬性值是一個或多個詞列表,如果是列表時,他們需要用空格隔開,只要屬性值中有一個value相匹配就可以選中該元素,而我們前面所講的E[attr="value"]是屬性值需要完全匹配才會被選中,他們兩者區別就是一個有“〜”號,一個沒有“〜”號。我們來看一個這方面的實例:

 
        
			.demo a[title~="website"]{background:orange;color:green;} 
 
        

上面代碼表示的是,div.demo下的a元素的title屬性中,只要其屬性值中含有"website"這個詞就會被選擇,回頭看看我們的html,不難發現所有a元素中“2,6,7,8”這四個a元素的title中都含有,所以被選中,請看效果:

 
        

 
        

如果我們在上面的代碼中,把那個“〜”號省去,大家看看他們不同之處:

 
        
			.demo a[title="website"]{background:orange;color:green;} 
 
        

這樣將不會選擇中任何元素,因為在所有a元素中無法找到完全匹配的"title='website'",換句話說就沒有選中任何元素,效果如下:

 
        

 
        

這個實例再次證明了E[attr="value"]和E[attr~="value"]之間的區別,和其中“〜”所取的作用,總結:屬性選擇器中有波浪(〜)時屬性值有value時就相匹配,沒有波浪(〜)時屬性值要完全是value時才匹配。

 
        

IE6不支持E[attr~="value"]屬性選擇器。

 
        

四、E[attr^="value"]

 
        

E[attr^="value"]屬性選擇器,指的是選擇attr屬性值以“value”開頭的所有元素,換句話說,選擇的屬性其以對應的屬性值是以“value”開始的:

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

上面代碼表示的是選擇了以href屬性,並且以"http://"和"mailto:"開頭的屬性值的所有a元素,換過更簡單一點的呢?只要a元素中的href屬性值是以"http://"或"mailto:"開頭的a元素都會以選中,那么下面大家請對照上面的html和下面的效果圖,看看是不是那么一回事:

 
        

 
        

IE6不支持E[attr^="value"]選擇器。

 
        

五、E[attr$="value"]

 
        

E[attr$="value"]屬性選擇器剛好與E[attr^="value"]選擇器相反,E[attr$="value"]表示的是選擇attr屬性值以"value"結尾的所有元素,換句話說就是選擇元素attr屬性,並且他的屬性值是以value結尾的,這個運用在給你一些特殊的鏈接加背景圖片很方便的,比如說給pdf,png,doc等不同文件加上不同icon,我們就可以使用這個屬性來實現,如:

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

上面代碼表示的是,選擇div.demo中元素有href屬性,並以png值結尾的a元素。(正如上面所說,只不過這里使用的是改變元素的背景色),效果如下:

 
        

 
        

IE6不支持E[attr$="value"]屬性選擇器。

 
        

六、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"]選擇器。

 
        

七、E[attr|="value"]

 
        

E[attr|="value"]是屬性選擇器中的最后一種,在說這個選擇器使用之前先提醒大家attr后面的是一個豎線“|”而不是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"被選中,因為他們都有一個lang屬性,並且他們的屬性值都符合以"zh"或"zh-"開始的元素。具體效果如下:

 
        

 
        

所以這種屬性選擇器用來匹配以“女value-1”,"value-2"的屬性是很方便的,比如頁面中有很多圖片,圖片文件名都是以"figure-1","figure-2"這樣的方式來命名的,那么使用這種選擇器選中圖片就很方便了,大家可以在本地嘗試一下,這種屬性選擇器最常常用的地方是如上面的示例用來匹配語言。

 
        

IE6不支持E[attr|="value"]選擇器。

 
        

有關於屬性選擇器就上面這些內容了,屬性選擇器除了IE6不支持外,其他的瀏覽器都能支持,這樣一來,如果你在你的頁面上使用了屬性選擇器,而且你需要處理ie6兼容問題,那你就需要確保IE6用別的方法來實現或者你應該確保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圖標。

 



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM