帶有波浪號和星號的屬性選擇器之間的 CSS 區別？

Question

鑒於以下 CSS 選擇器

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

上面的兩個選擇器是否應該做完全相同的事情？ 或者有什么區別？

我相信有某種區別，但什么？ 我發現的唯一一個是每對中的第一個在 CSS 2 的規范中，第二個在 CSS 3 的規范中。
還有別的事嗎？

小提琴

Answer 1

~=稱為Attribute Contains Word Selector 。

因此，當您使用： [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">

---

*=稱為Attribute Contains Substring Selector 。

當您使用[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 還調用包含字選擇器Whitespace Attribute Selector 。

最后，單擊此處查看演示小提琴。

Answer 2

星號屬性選擇器*=匹配任何子字符串出現。 您可以將其視為包含調用的字符串。

輸入	匹配*=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>

Answer 3

等價的Regular expression ：

• [屬性*=值] == /值/
• [屬性~=值] == / \\b值\\b /