CSS中带有波浪线和星号的属性选择器有何区别？

Question

给定以下CSS选择器

[attribute~=value] { }
[attribute*=value] { }

这两个选择器是否完全做同样的事情？还是有区别吗？

我相信它们之间有某种差别，但是是什么呢？我发现的唯一区别是每对中的第一个在CSS 2规范中，而第二个在CSS 3规范中。
还有其他的吗？

Fiddle

- LJ Wadowski

Answer 1

星号属性选择器*=匹配任何子字符串的出现。你可以将其视为包含字符串的调用。

输入	匹配 *=bar
foo	否
foobar	是
foo bar	是
foo barbaz	是
foo bar baz	是

波浪号属性选择器~=仅匹配整个单词。

输入	匹配 ~=bar
foo	否
foobar	否
foo bar	是
foo barbaz	否
foo bar baz	是

div {
  padding: 10px;
  border: 2px solid white;
}


[attribute*=bar] {
  background: lightgray;
}

[attribute~=bar] {
  border-color: red;
}

<div>no attribute</div>
<div attribute="foo">attribute="foo"</div>
<div attribute="foobar">attribute="foobar"</div>
<div attribute="foo bar">attribute="foo bar"</div>
<div attribute="foo barbaz">attribute="foo barbaz"</div>
<div attribute="foo bar baz">attribute="foo bar baz"</div>

- Etheryte

Answer 2

~=被称为属性包含单词选择器。

因此，当您使用：[attrName~=stuff]时，它将匹配每个具有attrName值等于"stuff"或包含"stuff "，" stuff "或" stuff"的元素。示例：

• 选择器：[name~=ball]
• 匹配：
  • <input name="ball" type="text">
  • <input name="ball " type="text">
  • <input name=" ball" type="text">
  • <input name=" ball " type="text">
  • <input name="doesnotmatter ball asLongAsballIsBetweenWhiteSpaces" type="text">

---

*=被称为属性包含子字符串选择器。

当您使用[attrName*=stuff]时，如果属性值中存在stuff，即使在某些单词中，也会进行匹配，例如：

• 选择器：[name*=ball]
• 匹配项：
  • 所有与[name~=ball]匹配的内容，以及...
  • <input name="whatball" type="text">
  • <input name="ballwhat" type="text">
  • <input name="whatballwhat" type="text">
  • 只要属性值包含字符串ball，就可以一直匹配下去。

---

注意：上面的链接指向jQuery的网站，只是因为对于这些特定的选择器，我认为它们的参考是最好的，但这些属性选择器来自CSS 2.1，并且自IE7以来就得到了支持。

MSDN还将包含单词选择器称为空格属性选择器。

最后，点击此处查看演示fiddle。

- acdcjunior

Answer 3

正则表达式等效：

• [attribute*=value] == /value/
• [attribute~=value] == /\bvalue\b/

注：此处的“/”表示正则表达式的匹配符号。

- Yas

---

哈哈，超简洁。最佳答案。 - Benny Bottema