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

Question

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

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

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

任何人都可以解释原因吗？感谢。

Answer 1

来自CSS Selectors specification：

  

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

如果您想匹配title="images"，可以改为使用[att*=val] substring-matching selector：

  

[att*=val]
  表示具有att属性的元素，该属性的值至少包含子字符串＆＃34; val＆＃34;的一个实例。如果＆＃34; val＆＃34;是空字符串，然后选择器不代表任何东西。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;