CSS3中屬性選擇器新增加的特性的詳細介紹

零、概覽

CSS2支援的屬性選擇器用一個表達式[{屬性| 屬性{= | |= | ~=} 值}]
1.[class="a"]只能符合class="a"的元素
2.[class~="a"]則可以匹配class="a"、class="a b"的元素
3.[lang|=en]則可以符合lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三種匹配方式[{屬性| 屬性{*= | ^= | $=} 值}]：
1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；
2.^=表示以指定字元開頭，[href^="/" ]則符合href="/a/a.htm"、href="/b"的元素
3.$=表示以指定字元結尾，[scr$=".png"]則符合所有png圖片，如src="logo.png"

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）;

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

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

也可以使用多屬性來選擇元素，如E[attr1][attr2], 這樣只要是同時具有這兩個屬性的元素都會被選取：

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

註：IE6不支援這個選擇器。

二、E[attr="value"]：指定了屬性值「value」

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

##註：屬性和屬性值必須完全匹配，特別是對於屬性值是單字清單的形式時，如：

    test

.demo a[class="links"]{color:red};   
.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;}

註：屬性選擇器中有波浪（?）時屬性值有value時就相匹配，沒有波浪（?）時屬性值要完全是value時才匹配。 IE6不支援E[attr~="value"]屬性選擇器。

四、E[attr^="value"]：

選擇attr屬性值以「value」開頭的所有元素，換句話說，選擇的屬性其以對應的屬性值是以“value”開始的。

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

註：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;}

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

六、E[attr*="value"]：

選擇attr屬性值中包含子字串"value"的所有元素。也就是說，只要你所選擇的屬性，其屬性值中有這個"value"值都會被選取。

.demo a[title*="site"]{background:black;color:white;}

註：IE6不支援E[attr*="value"]選擇器。

七、E[attr|="value"]：

稱為特定屬性選擇器。這個選擇器會選擇attr屬性值等於value或以value-開頭的所有元素。

.demo a[lang|="zh"]{background:gray;color:yellow;}

註：常用的地方是用來匹配語言，IE6不支援E[attr|="value"]選擇器。

註解：
1.屬性選擇器除了IE6不支援外，其他的瀏覽器都能支援。
2.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中屬性選擇器新增加的特性的詳細介紹相關文章請關注PHP中文網！