2.5　屬性選擇器

屬性選擇器是根據標簽的屬性來匹配元素，使用中括號進行標識。

    [屬性表達式]

CSS3包括7種屬性選擇器形式，結合示例具體說明如下。

【示例】下面的示例設計了一個簡單的圖片燈箱導航，其中HTML結構代碼如下。

使用CSS適當美化，具體樣式代碼請參考本節示例源代碼，初始預覽效果如圖2.8所示。

圖2.8　設計的燈箱廣告效果圖

1. E[attr]

選擇具有attr屬性的E元素。例如：

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

上面的代碼表示：選擇div.nav下所有帶有id屬性的a元素，并在這個元素上使用背景色為藍色，前景色為黃色，字體加粗的樣式。對照上面的HTML結構代碼，不難發現，只有第一個和最后一個a元素使用了id屬性，所以選中這兩個a元素，效果如圖2.9所示。

也可以指定多屬性。

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

上面的代碼表示的是選擇div.nav下的同時具有href和title兩個屬性的a元素，效果如圖2.10所示。

圖2.9　屬性快速匹配

圖2.10　多屬性快速匹配

2. E[attr="value"]

選擇具有attr屬性，且屬性值等于value的E元素。例如：

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

上面的代碼表示選中div.nav中的a元素，且這個元素有一個id="first"屬性值，則預覽效果如圖2.11所示。

E[attr="value"]屬性選擇器也可以多個屬性并寫，進一步縮小選擇范圍，用法如下所示，則預覽效果如圖2.12所示。

    .nav a[href="#1"][title] {background: yellow; color:green;}

圖2.11　屬性值快速匹配

圖2.12　多屬性值快速匹配

3. E[attr ~ ="value"]

選擇具有attr屬性，且屬性值為一用空格分隔的字詞列表，其中一個等于value的E元素。包含只有一個值，且該值等于value的情況。例如：

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

上面的代碼表示在div.nav下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇，結果a元素中“2”“6”“7”“8”這4個a元素的title中都含有，所以被選中，如圖2.13所示。

4. E[attr^="value"]

選擇具有attr屬性，且屬性值為以value開頭的字符串的E元素。例如：

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

上面的代碼表示的是選擇了以title屬性，并且以"http://"和"mailto:"開頭的屬性值的所有a元素，匹配效果如圖2.14所示。

圖2.13　屬性值局部詞匹配

圖2.14　匹配屬性值開頭字符串的元素

5. E[attr$="value"]

選擇具有attr屬性，且屬性值為以value結尾的字符串的E元素。例如：

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

上面的代碼表示選擇div.nav中元素有href屬性，并以"png"結尾的a元素。

6. E[attr*="value"]

選擇具有attr屬性，且屬性值為包含value的字符串的E元素。例如：

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

上面的代碼表示選擇div.nav中a元素的title屬性中只要有"site"字符串就可以。上面樣式的預覽效果如圖2.15所示。

7. E[attr|="value"]

選擇具有attr屬性，其值是以value開頭，并用連接符（-）分隔的字符串的E元素；如果值僅為value，也將被選擇。例如：

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

上面的代碼會選中div.nav中lang屬性等于zh或以zh-開頭的所有a元素，如圖2.16所示。

圖2.15　匹配屬性值中的特定子串

圖2.16　匹配屬性值開頭字符串的元素