1.存在和值（Presence and value）屬性選擇器
這些屬性選擇器嘗試匹配精確的屬性值：
[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。
[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
[attr~=val]：該選擇器僅選擇具有 attr 屬性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表裡中的一個。
2.子串值（Substring value）屬性選擇器
這種情況的屬性選擇器也被稱為“偽正則選擇器”，因為它們提供類似 regular expression 的靈活匹配方式（但請注意，這些選擇器並不是真正的正規表示式）：
[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意，這裡的 “-” 不是一個錯誤，這是用來處理語言編碼的）。
[attr^=val] : 選擇attr屬性的值以 val 開頭（包括 val）的元素。
[attr$=val] : 選擇attr屬性的值以 val 結尾（包括 val）的元素。
[attr*=val] : 選擇attr屬性的值中包含子字串 val 的元素（一個子字串就是一個字串的一部分而已，例如，”cat“ 是 字串 ”caterpillar“ 的子字串）。
CSS 屬性選擇器 ~=, |=, ^=, $=, *= 的區別
“value 是完整單詞” 型別的比較符號: ~=, |=
“拼接字串” 型別的比較符號: ^=, $=, *=