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

Question

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

例如， title~="image"将匹配title="image"和title="first image" 。

但它不会匹配title="images" ，即使“images”包含“image”。

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

Answer 1

从CSS选择器规范 ：

[att~=val]
表示具有att属性的元素，该属性的值是以空格分隔的单词列表， 其中一个正好是“val” 。 如果“val”包含空格，它将永远不会表示任何内容（因为单词用空格分隔）。 此外，如果“val”是空字符串，它将永远不会代表任何东西。

如果你想匹配title="images" ，你可以使用[att*=val]子串匹配选择器 ：

[att*=val]
表示具有att属性的元素，该属性的值至少包含子字符串“val”的一个实例。 如果“val”是空字符串，则选择器不代表任何内容。

 [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>