Question

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

Answer 1

来自doc：

[ attr | = value ]表示属性名称为attr的元素。   它的值可以是“值”，也可以立即以“值”开头   接着是“ - ”（U + 002D）。它可以用于语言子码匹配。

[ attr * = value ]表示属性名称为attr和的元素   其值至少包含一个字符串“value”的出现   串。

视觉差异：

<强> [ATTR | =值]

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

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

<强> [ATTR * =值]

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

var values = Object.keys(window).filter(function(el) {
    return /^yaCounter.*?/i.test(el);
});

<强>参考

Attribute selectors

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>

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



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

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

Answer 3

它们截然不同：

[attr|=value]

表示属性名称为attr的元素。它的值可以是“值”，也可以以“值”开头，后跟“ - ”（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] Selector 是在CSS3（最新版本）之前定义的，并且在CSS 2.1中可用。如您链接到的页面中所述：

用于选择具有指定值的指定属性的元素。

虽然在大多数情况下这很方便，但有时会有someString_somethingUseful_somethingElse来自somethingUseful的结构化css的框架。

现在说我想选择其中包含somethingUseful位的所有元素。上面的选择器不允许我这样做，因为类定义的somethingElse位位于类名的中间。与procedure Txxx.RunWorker; begin FExecutionThread := TThread.CreateAnonymousThread(procedure () begin TThread.Synchronize (TThread.CurrentThread, procedure () begin // Here before worker stuff NotifyBeforeWorkerStuff; end); // Do worker stuff TThread.Synchronize (TThread.CurrentThread, procedure () begin // Here after worker stuff NotifyAfterWorkerStuff; end); end); FExecutionThread.Start; end; end;位相同，它位于末尾。

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

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

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

5 个答案: