CSS [属性| =值] VS [属性* =值]选择

Question

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

Answer 1

他们是截然不同的：

[attr|=value]

表示使用attr的属性名的元素。它的值可以完全是“值”，或者可以以“值”开始，紧接着是“ - ”（U + 002D）。它可以用于语言子代码匹配。

[attr*=value]

表示具有的ATTR的属性名的元素和值中包含字符串“值”为子串中的至少一个发生。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

从DOC：

[ATTR | =值]表示使用attr的属性名的元素。 它的值可以完全是“值”，或者可以立即以“值”开始，后面跟着“ - ”（U + 002D） 。它可以用于语言子代码匹配。

[ATTR * =值]表示的ATTR属性名和 值中包含字符串“值”为 子串的至少一个发生的元素。

视觉差异：

[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

Answer 3

有很多这两个选择器

[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. 的之间的差异[属性| =值]选择器用于选择具有指定的属性起始元件与指定的值。

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

见的例子，以获取有关这两个选择一个清晰的概念。

Answer 4

第一个选择器确保属性值以提交的值开始，第二个选择器只需要包含它的属性值。

如果必须区分在同一属性中不同位置具有相同字符串的属性，这将会很有帮助。

Answer 5

CSS随着时间的推移已经发展，并且随着更多选择器的需求和需求的发展，功能也不断增加。

CSS [attribute | = value]选择器在CSS3（最新版本）之前定义，并且在CSS 2.1中可用。正如指出的页面链接到您：

用于选择与指定的属性元素开始与指定的值。

虽然这在大多数情况下非常方便，但有时候会有框架，它的类定义中包含了来自someString_somethingUseful_somethingElse的结构化css。

现在说我想选择其中somethingUseful位的所有元素。上面的选择器不允许我这样做，因为位于类名中间的类定义的somethingUseful位。与somethingElse位相同，它位于最后。

因此，在CSS3，我们看到引进[属性* =值]选择这使我们能够选择可以具有这些关键字作为其定义一个子元件（尽管不一定是在前面）看的：

选择器的每一个元素，其属性值含有指定值相匹配。