给定以下CSS选择器
[attribute~=value] { }
[attribute*=value] { }
这两个选择器是否完全做同样的事情?还是有区别吗?
我相信它们之间有某种差别,但是是什么呢?我发现的唯一区别是每对中的第一个在CSS 2规范中,而第二个在CSS 3规范中。
还有其他的吗?
*=
匹配任何子字符串的出现。你可以将其视为包含字符串的调用。
输入 | 匹配 *=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>
~=
被称为属性包含单词选择器。
因此,当您使用:[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
,就可以一直匹配下去。正则表达式
等效:
*=
value] == /value/~=
value] == /\b
value\b
/