css - [attribute〜=value]と[attribute*=value]の違いを教えてください

Question

これら2つのセレクターの違いを見つけることができません。どちらも同じことをしているようです。つまり、特定の文字列を含む特定の属性値に基づいてタグを選択します。

[attribute〜= value]の場合：http ：//www.w3schools.com/cssref/sel_attribute_value_contains.asp

[属性*=値]の場合：http ：//www.w3schools.com/cssref/sel_attr_contain.asp

Answer 1

最初のもの（[attribute~=value]）は空白で区切られた検索です...

<!-- Would match -->
<div class="value another"></div>

...そして2番目の（[attribute*=value]）は部分文字列検索です...

<!-- Would match -->
<div class="a_value"></div>

W3Schoolsは、この区別を明確に示していないようです。より良いリソースを使用してください。

Answer 2

[attribute〜= "value"]はスペースで区切られた特定の単語を含む要素を選択し、[attribute *="value"]は特定の部分文字列を含む要素を選択します。

たとえば、[data-test〜= "value"]は以下のdivで一致しませんが、[data-test *="value"]は一致します。

<div data-test="my values go here"></div>