CSS 屬性選擇器 ~=, |=, ^=, $=, *= 的區別
先上總結:
"value 必須是完整單詞" 類型的比較符號: ~=, |=
"value 可以是拼接字符串" 類型的比較符號: *=, ^=, $=
1. attribute 屬性中包含 value:
[attribute~=value] 屬性中包含獨立的單詞為 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 屬性中做字符串拆分，只要能拆出來 value 這個詞就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2. attribute 屬性以 value 開頭:
[attribute|=value] 屬性中必須是完整且唯一的單詞，或者以 - 分隔開：，例如：
[lang|=en] --> <p lang="en"> 或 <p lang="en-us">
[attribute^=value] 屬性的前幾個字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">
3. attribute 屬性以 value 結尾:
[attribute$=value] 屬性的后幾個字母是 value 就可以，例如：a[src$=".pdf"]
4. class 類模糊匹配
類沒有單獨的模糊匹配選擇器，只能使用屬性的模糊匹配選擇器
[class*=“icon”] 包含icon的class
[class^=“icon”] 以icon開頭的class
[class$=“icon”] 以icon結尾的class
[class~=“icon”] 包含icon完整單詞的class
[class|=“icon”] 是icon或者以icon-開頭的class
出處： CSS屬性選擇器