Question

给出以下CSS选择器

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

上面的两个选择器是否应该完全相同？或者有区别吗？

我相信存在某种差异，但是什么呢？我发现的唯一一个是每对中的第一个是CSS 2的规格，而CSS 3的规格中的第二个。
还有别的吗？

Fiddle

Answer 1

~=被称为Attribute Contains Word Selector。

因此，当您使用：[attrName~=stuff]时，它将匹配attrName的值等于 "stuff"或包含{{1}的每个元素}，"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">。

注意：上面的链接指向jQuery的网站，因为对于那些特定的选择器，我发现它们的引用是最好的，但这些属性选择器来自 CSS 2.1 和 have been supported since IE7 。

MSDN还会调用包含字选择器Whitespace Attribute Selector。

最后， click here for a demo fiddle 。

Answer 2

前者用于选择包含整个特定单词的元素。后者用于选择任何字符串包含，它不必是一个完整的单词。

div {
  padding: 30px;
}

/* Matches "foo", but not "fo" */
[attribute~=foo] {
  background: lightcoral;
}

/* Matches both "bar" and "ba" */
[attribute*=ba] {
  background: lavender;
}

<div attribute="foo"></div>
<div attribute="bar"></div>

Answer 3

Regular expression等效：

[属性*=值] == / value /
[属性~=值] == / \b值\b /

具有波浪号和星号的属性选择器之间的CSS差异？

3 个答案: