CSS属性选择器[title~="ab"]未选中预期元素，求解释原因

先看你给出的代码：

CSS代码 #

[title~="ab"] {
  color: red;
}

HTML代码 #

<div title="ab">I am div</div>
<div>
  <p>I am p1</p>
</div>
<p title="abc">I am p2</p>
<p>I am p3</p>
<div>
  <p title="ab">I am p4</p>
</div>

你误解了[attr~="value"]这个选择器的作用——它不是匹配包含子串的属性值，而是匹配属性值为空格分隔的单词列表，且其中恰好有一个独立单词等于value的元素。

比如：

• title="ab"：是独立单词，符合匹配条件
• title="ab test"：空格分隔的列表里有"ab"，符合
• title="test ab"：同样符合
  但title="abc"是一个完整的单词，既不等于"ab"，也不是空格分隔列表里的其中一项，所以不会被选中。

如果想要匹配所有title值中包含"ab"子串的元素，应该用[title*="ab"]这个属性选择器，它会匹配属性值任意位置出现"ab"的元素，包括"abc"、"xab"、"ab123"这类情况。修改后的CSS如下：

[title*="ab"] {
  color: red;
}

这样修改后，"I am p2"对应的<p title="abc">元素就会被选中，文字变成红色。

内容的提问来源于stack exchange，提问作者leo