CSS [属性|=值] 与 [属性*=值] 选择器

Question

为什么我们需要CSS [attribute|=value] Selector根本当 CSS3 [attribute*=value] Selector基本上完成相同的事情，浏览器兼容性几乎相似？是否存在第一个 CSS 选择器可以执行而第二个 CSS 选择器无法执行的操作？这是第一次遇到两个非常相似的选择器，并且想知道为什么第一个选择器存在。

Answer 1

来自文档:

[attr|=value] Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

视觉差异:

[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>

引用文献

Attribute selectors