Design Code 設計密碼

簡單屬性選擇

如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。

例子 1

如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：

*[title] {color:red;}
	

例子 2

與上麵類似，可以只對有href 屬性的錨（a 元素）應用樣式：

a[href] {color:red;}
	

例子 3

還可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。

例如，為了將同時有href 和title 屬性的HTML 超鏈接的文本設置為紅色，可以這樣寫：

a[href][title] {color:red;}
	

例子 4

可以採用一些創造性的方法使用這個特性。

例如，可以對所有帶有alt 屬性的圖像應用樣式，從而突出顯示這些有效的圖像：

img[alt] {border: 5px solid red;}
	

提示：上面這個特例更適合用來診斷而不是設計，即用來確定圖像是否確實有效。

例子5：為XML 文檔使用屬性選擇器

屬性選擇器在XML 文檔中相當有用，因為XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。

假設我們為描述太陽系行星設計了一個XML 文檔。如果我們想選擇有moons 屬性的所有planet 元素，使之顯示為紅色，以便能更關注有moons 的行星，就可以這樣寫：

planet[moons] {color:red;}
	

這會讓以下標記片段中的第二個和第三個元素的文本顯示為紅色，但第一個元素的文本不是紅色：

<planet>Venus</planet>
<planet <span class="marked">moons="1"</span> >Earth</planet>
<planet <span class="marked">moons="2"</span> >Mars</planet>
	

根據具體屬性值選擇

除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。

例子 1

例如，假設希望將指向Web 服務器上某個指定文檔的超鏈接變成紅色，可以這樣寫：

a[href="http://www.oodcoo.com/designcode.asp"] {color: red;}
	

例子 2

與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。

a[href="http://www.oodcoo.com/"][title="Design Code"] {color: red;}
	

這會把以下標記中的第一個超鏈接的文本變為紅色，但是第二個或第三個鏈接不受影響：

<a <span class="marked">href="http://www.oodcoo.com/" </span> <span class="marked">title="Design Code"</span> >Design Code</a>
<a href="http://www.oodcoo.com/css/" title="CSS">CSS</a>
<a href="http://www.oodcoo.com/html/" title="HTML">HTML</a>
	

例子 3

同樣地，XML 語言也可以利用這種方法來設置樣式。

下面我們再回到行星那個例子中。假設只希望選擇moons 屬性值為1 的那些planet 元素：

planet[moons="1"] {color: red;}
	

上面的代碼會把以下標記中的第二個元素變成紅色，但第一個和第三個元素不受影響：

<planet>Venus</planet>
<planet <span class="marked">moons="1"</span> >Earth</planet>
<planet moons="2">Mars</planet>
	

屬性與屬性值必須完全匹配

請注意，這種格式要求必須與屬性值完全匹配。

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標記片段：

<p <span class="marked">class="important warning"</span> >This paragraph is a very important warning.</p>
	

如果寫成p[class="important"]，那麼這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}
	

根據部分屬性值選擇

如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

假設您想選擇class 屬性中包含important 的元素，可以用下面這個選擇器做到這一點：

p[class~="important"] {color: red;}
	

如果忽略了波浪號，則說明需要完成完全值匹配。

部分值屬性選擇器與點號類名記法的區別

該選擇器等價於我們在類選擇器中討論過的點號類名記法。

也就是說，p.important 和p[class="important"] 應用到HTML 文檔時是等價的。

那麼，為什麼還要有"~=" 屬性選擇器呢？因為它能用於任何屬性，而不只是class。

例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基於title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}
	

這個規則會選擇title 文本包含"Figure" 的所有圖像。沒有title 屬性或者title 屬性中不包含"Figure" 的圖像都不會匹配。

子串匹配屬性選擇器

下面為您介紹一個更高級的選擇器模塊，它是CSS2 完成之後發布的，其中包含了更多的部分值屬性選擇器。按照規範的說法，應該稱之為“子串匹配屬性選擇器”。

很多現代瀏覽器都支持這些選擇器，包括IE7。

下表是對這些選擇器的簡單總結：

可以想到，這些選擇有很多用途。

舉例來說，如果希望對指向Design Code 的所有鏈接應用樣式，不必為所有這些鏈接指定class，再根據這個類編寫樣式，而只需編寫以下規則：

a[href*="oodcoo.com"] {color: red;}
	

提示：任何屬性都可以使用這些選擇器。

特定屬性選擇類型

最後為您介紹特定屬性選擇器。請看下面的例子：

*[lang|="en"] {color: red;}
	

上面這個規則會選擇lang 屬性等於en 或以en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：

<p lang=" <span class="marked">en</span> ">Hello!</p>
<p lang=" <span class="marked">en-</span> us">Greetings!</p>
<p lang=" <span class="marked">en-</span> au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
	

一般來說，[att|="val"] 可以用於任何屬性及其值。

假設一個HTML文檔中有一系列圖片，其中每個圖片的文件名 都形 如figure-1.jpg和figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：

img[src|="figure"] {border: 1px solid gray;}
	

當然，這種屬性選擇器最常見的用途還是匹配語言值。