CSS 屬性選擇器 ~=, |=, ^=, $=, *= 的區別

先上總結:

"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"]


出處： https://www.runoob.com/css/css-attribute-selectors.html