CSSアトリビュートセレクタの[att〜= val]と[att * = val]との違いはどのくらいですか？

Question

多分私は何かを逃しているが、彼らは似ているようだ。あなたは、たとえば使用している場合...

a[alt~="thumb"] 

か...

a[alt*="thumb"] 

私はダウン違っへの私の選択を何を絞り込むことができますか？私は、*があなたに部分一致を与えている間に、あなたが引用符で部分的に一致することを理解しています。私はコードをちょっと試してみるつもりですが、ここで問題を見つけることができなかったので、良い話題になると思っていました。 （標準のセレクタをサポートしています）jQueryのヘルプから

Answer 1

：

a[alt~="thumb"] 

説明：スペースで区切られた指定した単語を含む 値を持つ指定された属性を持つ要素を選択します。このセレクタ は、テスト文字列を属性値の各単語と一致させます。 "word"は空白で区切られた文字列として定義されます。 セレクタは、テスト文字列が のいずれかのワードと完全に一致するかどうか一致します。

a[alt*="thumb"] 

説明：指定されたサブストリングを含む 値で指定された属性を持つ要素を選択。これは、値と一致するjQueryアトリビュートセレクタのうち、最も多くのものです。 です。 セレクタの文字列が 要素の属性値のどこかに表示される場合、要素を選択します。このセレクタを属性 のContains Wordセレクタ（[attr〜= "word"]など）と比較すると、多くの場合、より適切な になります。

セレクタ~=は、値が空白で囲まれていると基本的に一致します。セレクタ*=は、値がどこにあっても一致します。

<div alt='heading navigation'> 
<div alt='head'> 

div[alt~='head']は第二のdivに一致するだろうが、div[alt*='head']は、両方に一致します。

Answer 2

[att~=value]は、セレクタを含むです。

したがって[alt="foo"]セレクタは<a alt="foo bar">と一致しますが、<a alt="foobar">と一致しません。

[alt*="foo"]は、これが単語やその他のものを区別しないため、両方とも一致します。それが価値にある限り、それはヒットします。