常見的 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 是用來設計邊框用的。border: 1px gray solid;
}
[attribute=value]
img[title="photo"] {
border: 1px gray solid;
}
延續上一個範例，在這裡我們在 CSS Attribute Selector 中加上了＂=photo＂的語法，代表要選擇的是網頁中圖片有 title 屬性且屬性值是 photo 的圖片，沒有 photo 屬性值的圖片將不會被選取。border: 1px gray solid;
}
[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 就不會被選取。 <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>
[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>
範例的實際效果<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>
範例的實際效果<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>
範例的實際效果<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>
範例的實際效果<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
延伸閱讀