CSS [attribute | = value] vs [attribute*= value]选择器

Question

当CSS3 [attribute*= value] Selector基本上完成同样的事情时,为什么我们需要CSS [attribute | = value]选择器,浏览器兼容性几乎相似？有没有第一个CSS选择器做的事情,第二个不能？这是第一次遇到两个非常相似的选择器,并想知道为什么第一个存在于第一位.

Answer 1

来自doc:

[ attr | = value ]表示属性名称为attr的元素.它的值可以是"值",也可以以"值"开头,后跟" - "(U + 002D).它可以用于语言子码匹配.

[ attr*= value ]表示属性名称为attr的元素,其值至少包含一个字符串"value"作为子字符串.

视觉差异:

[ATTR | =值]

/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}

<span lang='zh'>zh</span>

[ATTR*=值]

/* All links to with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;}

<a href="www.example.com">example<a/>

在相同的代码示例中:

div[color|="red"] {
  background: red;
}
div[color*="blue"] {
  color: blue;
}

<div>
  <div color='red-yellow'>This shoud has only red background</div>
  <div color='blue'>This shoud has only blue color</div>
  <div color='red-blue'>This shoud has blue color and red background</div>
  <div color='blue-red'>This shoud be only blue color</div>
</div>

参考

属性选择器

Answer 2

这两个选择器之间存在很多差异

[lang|=en] {
    background: yellow;
}

[lang*=en] {
  color:red;
}

<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="usen">Hi!</p>
<p lang="noen">Hei!</p>

<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

1. [attribute | = value]选择器用于选择具有以指定值开头的指定属性的元素.

2. [attribute*= value]选择器匹配其属性值包含指定值的每个元素.

请参阅示例以清楚了解两个选择器.