CSS 屬性選擇器詳解

CSS 屬性選擇器詳解

CSS ID 選擇器詳解

CSS 兒女選擇器

CSS 2 引入了屬性選擇器。

屬性選擇器可以按照元素的屬性及屬性值來選擇元素。

簡樸屬性選擇

假如但願選擇有某個屬性的元素，而豈論屬性值是什麼，可以行使簡樸屬性選擇器。

例子 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 moons="1">Earth</planet> <planet moons="2">Mars</planet>

查察結果

按照詳細屬性值選擇

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

例子 1

譬喻，假設但願將指向 Web 處事器上某個指定文檔的超鏈接釀成赤色，可以這樣寫：

a[href=""] {color: red;}

親身試一試

例子 2

與簡樸屬性選擇器相同，可以把多個屬性-值選擇器鏈接在一路來選擇一個文檔。

a[href=""][title="W3School"] {color: red;}

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

<a href="" title="W3School">W3School</a> <a href="" title="CSS">CSS</a> <a href="" title="HTML">HTML</a>

親身試一試

例子 3

同樣地，XML 說話也可以操作這種要領來配置樣式。

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

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

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

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

查察結果

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

請留意，這種名目要求必需與屬性值完全匹配。

假如屬性值包括用空格脫離的值列表，匹配就也許出題目。

請思量一下的標志片斷：

<p class="important warning">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。

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

范例 描寫

[abc^="def"] 選擇 abc 屬性值以 "def" 開頭的全部元素

[abc$="def"] 選擇 abc 屬性值以 "def" 末了的全部元素

[abc*="def"] 選擇 abc 屬性值中包括子串 "def" 的全部元素

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

舉例來說，假如但願對指向 W3School 的全部鏈策應用樣式，不必為全部這些鏈接指定 class，再按照這個類編寫樣式，而只需編寫以下法則：

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

親身試一試

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

特定屬性選擇范例

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

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