《HTML 5與CSS 3權威指南（第3版·下冊）》——19.2 屬性選擇器

本節書摘來自華章出版社《html 5與css 3權威指南（第3版·下冊）》一 書中的第19章，第19.2節，作者：陸淩牛，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

在html中，通過各種各樣的屬性，我們可以給元素增加很多附加資訊。例如，通過width屬性，我們可以指定div元素的寬度，通過id屬性，我們可以将不同的div元素進行區分，并且通過javascript來控制這個div元素的内容和狀态。

接下來，我們在代碼清單19-1中看一個html頁面，該頁面中包含一些div，每個div之間用id屬性進行區分。

代碼清單19-1　一個具有很多div元素的頁面

<code>`</code>

然後指定id為“section1”的這個div元素的class屬性，如下所示。

[att=val]<code>`</code>

其中att代表屬性，val代表屬性值。例如，要将id為“section1”的div元素的背景色設定為黃色，我們隻要在代碼清單19-1中加入如下所示的樣式代碼即可。

br&gt;"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"&gt;

xmlns="http://www.w3.org/1999/xhtml"&gt;

示例文本1

示例文本1-1

示例文本1-2

示例文本2

示例文本2-1

示例文本2-2

追加了這個屬性選擇器後的運作結果如圖19-1所示。

在css3中，追加了三個屬性選擇器分别為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。

[att*=val] 屬性選擇器

[att=val]屬性選擇器的含義是：如果元素用att表示的屬性的屬性值中包含用val指定的字元，則該元素使用這個樣式。針對上面所述“[id=section1]”屬性選擇器可以修改成“[id=section1]”，其中“id”相當于[att=val]屬性選擇器中的“att”，“section1”相當于[att=val]屬性選擇器中的“val”。

在代碼清單19-1所述示例的樣式代碼中，如果使用如下代碼中所示的[att*=val]屬性選擇器，則頁面中id為“section1”、“subsection1-1”、“subsection1-2”的div元素的背景色都變為黃色，因為這些元素的id屬性中都包含“section1”字元。

[id^=section]{

}<code>`</code>

代碼19-1所述示例的樣式代碼中使用[att^=val]屬性選擇器後的運作結果如圖19-3所示。

[att$=val] 屬性選擇器

[att$=val]屬性選擇器的含義是：如果元素用att表示的屬性的屬性值的結尾字元為用val指定的字元，則該元素使用這個樣式。針對上面所述“[id=section1]”屬性選擇器可以修改成“[id$=section1]”。

在代碼19-1所述示例的樣式代碼中，如果采用如下所示的[att$=val]屬性選擇器，并且将val指定為“-1”，則頁面中id為“subsection1-1”、“subsection2-1”的div元素的背景色都變為黃色，因為這些元素的id屬性的結尾字元都為“-1”字元。另外請注意該屬性選擇器中在指定比對字元前必須加上“”這個escape字元。

<a href="http://lulingniu/">html5+css3權威指南</a>

<a href="http://lulingniu/css3.htm">css3的新特性</a>

<a href="photo.jpg">圖像素材</a>

這段代碼的運作結果如圖19-5所示。

另外，如果使用ie浏覽器來運作本示例，因為在ie 8之前尚未支援after僞元素選擇器，是以該示例隻能在ie 8之後的浏覽器中正确顯示，在接下來的“僞元素選擇器概述”一節中将針對after僞元素選擇器做詳細說明。