css - 次のCSSセレクターの違いは何ですか

Question

a[attribute~=val]{
}


a[attribute|=val]{
}


a[attribute*=val]{
}

通常、私は最後のものを使用します..しかし、それらすべての違いは何ですか

Answer 1

a[attribute~=val]

スペースで区切られた「val」という単語を値に含む属性を持つa要素に一致します。attribute

a[attribute|=val]

値が正確に「val」であるか、「val-」で始まる属性を持つa要素に一致します。attribute

a[attribute*=val]

値が文字列「val」を含む属性を持つa要素に一致します。attribute

---

CSS セレクターの仕様を読めば、非常に簡単にそれを見つけることができたはずです。

Answer 2

属性を含む単語セレクター~=は、スペースで区切られた単語を検索します。たとえば、"Jon"では見つかりますが、 では見つかり"Jon Peters"ません"Jonathan Peters"。

属性を含むプレフィックス セレクター|=は、ダッシュで区切られたプレフィックスを検索します。たとえば、 または では検索されますが、検索では検索さ"en"れ"en-GB"ません。"english""kal-en"

属性を含むセレクター*=は、属性値内の任意のテキストを検索します。