CSS [attribute~ = value]选择器行为

此选择器用于选择具有包含给定单词的属性值的元素.

例如,标题〜=“图像”将匹配title =“image”和title =“first image”.

但它不会匹配title =“images”,即使“images”包含“image”.

有谁能解释为什么？谢谢.

从 CSS Selectors specification：

[att~=val]
Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly “val”. If “val” contains whitespace, it will never represent anything (since the words are separated by spaces). Also if “val” is the empty string, it will never represent anything.

如果你想匹配title =“images”,你可以改用[att*=val] substring-matching selector：

[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring “val”. If “val” is the empty string then the selector does not represent anything.

[class*="foo"] {
  margin: 0;
  color: green;
}

<figure class="foo">foo</figure>
<figure class="foo bar">foo bar</figure>
<figure class="bar foo">bar foo</figure>
<figure class="foos bar">foos bar</figure>