CSS Attribute Selectors 屬性選擇器

CSS Attribute Selectors 是 CSS 的一個重要選擇器,從 CSS 2.1 開始,設計師可以使用網頁元素的屬性(attribute)來選擇它們,優點是不需要額外替這些網頁元素設定 ID 或 Class 也同樣能選擇它們,CSS Attribute Selectors 可以使用多種不同的語法,例如使用屬性的名稱或同時包含屬性值,甚至可以選擇屬性值中包含某些特定字符的元素,使用相當彈性。

常見的 CSS Attribute Selectors 語法有 [attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value] 以及 [attribute*=value],看起來有一點複雜,不過別擔心,以下我們就用範例的方式操作給各位看。

[attribute]
img[title] {
border: 1px gray solid;
}
這個意思是要選擇網頁中的圖片元素(img)且圖片元素要有 title 屬性,如果沒有 title 屬性的圖片將不會被選取,反之,有 title 屬性的圖片將會被加上一個灰色的邊框,範例中的 border 是用來設計邊框用的。

[attribute=value]
img[title="photo"] {
border: 1px gray solid;
}
延續上一個範例,在這裡我們在 CSS Attribute Selector 中加上了"=photo"的語法,代表要選擇的是網頁中圖片有 title 屬性且屬性值是 photo 的圖片,沒有 photo 屬性值的圖片將不會被選取。

[attribute~=value]
<!DOCTYPE html>
<html>
<head>
<style>
img[title~="photo1"] {
border: 1px gray solid;
}
</style>
</head>
<body>
<img src="範例圖片" title="photo1 good">
<img src="範例圖片" title="photo2 good">
</body>
</html>
這個範例在屬性值的等號前面加上了(~)符號,代表要選擇的是網頁中圖片有 title 屬性,而且屬性值必須是有空格分開的字串,其中還必須有一個是 photo1,這樣才會被選取,像範例中的第二張圖的 title 屬性值不包含 photo1 就不會被選取。

[attribute|=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title|="T1"] {
color:blue;
}
</style>
</head>
<body>
<span title="T1">這段文字將會變成藍色的</span><br>
<span title="T1-22">這段文字將會變成藍色的</span><br>
<span title="T2">這段文字將維持原本的黑色</span>
</body>
</html>
範例的實際效果
這段文字將會變成藍色的
這段文字將會變成藍色的
這段文字將維持原本的黑色
這樣的寫法代表 CSS Attribute Selector 只會選擇 span 元素中有 title 屬性,而且 title 屬性值中必須包含至少一個 T1 或 T1 後連接著一個水平橫線符號(-),所以範例的第一個 span 與第二個 span 都會被選取,第三個 span 則不會被選取。

[attribute^=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title^="T1"] {
color:red;
}
</style>
</head>
<body>
<span title="T1">這段文字將會變成紅色的</span><br>
<span title="T12">這段文字將會變成紅色的</span><br>
<span title="T2">這段文字將會維持原本的黑色</span>
</body>
</html>
範例的實際效果
這段文字將會變成紅色的
這段文字將會變成紅色的
這段文字將會維持原本的黑色
在此範例中,CSS Attribute Selector 只會選擇 title 屬性值中的字串開頭包含有 T1 的 span 元素,無論 T1 後還有沒有其它的字符都會被選取,但如果不包含 T1 或 T1 不在字串的開頭都不會被選取。

[attribute$=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title$="T1"] {
color:green;
}
</style>
</head>
<body>
<span title="ABC-T1">這段文字將會變成綠色的</span><br>
<span title="DEF-T1">這段文字將會變成綠色的</span><br>
<span title="DEF-T2">這段文字將會維持原本的黑色</span>
</body>
</html>
範例的實際效果
這段文字將會變成綠色的
這段文字將會變成綠色的
這段文字將會維持原本的黑色
這個範例在等號前加上 $ 符號會讓 CSS Attribute Selector 選擇 title 屬性值中的字串尾含有 T1 的 span 元素,例如第一個 span 與第二個 span 的 title 屬性值字尾都有 T1,所以會被選取,而第三個 span 的 title 屬性值字尾並沒有 T1,所以不會被選取。

[attribute*=value]
<!DOCTYPE html>
<html>
<head>
<style>
span[title$="T1"] {
color:orange;
}
</style>
</head>
<body>
<span title="ABC-T1-23">這段文字會變成橘色的</span><br>
<span title="DEF-T122">這段文字會變成橘色的</span><br>
<span title="DEF-T2">這段文字會維持原本的黑色</span>
</body>
</html>
範例的實際效果
這段文字會變成橘色的
這段文字會變成橘色的
這段文字會維持原本的黑色
這樣的寫法會讓 CSS Attribute Selector 選擇 title 屬性值中含有 T1 字符的 span 元素,無論 T1 在 title 屬性值中的哪個部份,所以範例中的第一個 span 與第二個 span 都會被選取,而第三個 span 的 title 屬性值不包含 T1,所以不會被選取。

See English Version: CSS Attribute Selectors

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012