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

Question

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

Answer 1

来自文档：

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

[attr*=value]表示属性名称为attr且其值至少包含一个字符串"value"作为子字符串。

视觉差异：

[attr|=value]

/* 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*=value]

/* 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]选择器匹配其属性值包含指定值的每个元素。

请参阅示例以清楚地了解这两个选择器。

Answer 3

它们明显不同：

[attr|=value]

表示属性名称为attr的元素。它的值可以完全是"value"，也可以以"value"开头，紧跟"-"(U+002D)。它可以用于语言子代码匹配。

[attr*=value]

表示属性名为attr的元素，其值至少包含一个字符串"value"作为子字符串。

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

Answer 4

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

如果必须区分在同一属性内不同位置具有相同字符串的属性，这将非常有用。

Answer 5

CSS随着时间的推移而发展，随着它的发展，对更多选择器和函数的需求也在增加。

CSS[attribute|=value]选择器是在CSS3(最新版本)之前定义的，在CSS2.1中可用。如您链接到的页面所示：

用于选择具有指定属性的元素，以指定值开始。

虽然这在大多数情况下很方便，但有时也有一些框架，它们在someString_somethingUseful_somethingElse的from中附带了结构化css，用于其类定义。

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

因此，在CSS3中，我们看到了[attribute*=value]选择器的引入，它允许我们选择在其定义中可能将这些关键字作为子字符串的元素(尽管不一定在前面)参见：

选择器匹配其属性值包含指定值的每个元素。