css - 这个 CSS (|=) 是什么意思？这叫什么？

Question

我有一些代码看起来像

[class|="e"]
{
    margin: 0 0 0 0;
} 

|= 是什么意思？我应该用谷歌搜索什么？

我尝试搜索 stackoverflow(可以找到标点符号)和 Google，但没有名字很难搜索。

Answer 1

这被称为 attribute selector .具体来说，|= attribute selector查找具有给定属性的元素，其值与给定值完全匹配或以给定值开头，紧接着是 -(前缀，如果您愿意的话)。

您的选择器匹配具有 class 属性的元素，其值:

• 正好是e，或者
• 以 e- 开头。

相当于下面两个属性选择器的组合结果:

[class="e"], [class^="e-"]

请注意，|= 通常与 hreflang 和 lang 等语言属性一起使用，尽管在后者的情况下，:lang() 通常是首选 — this answer解释两者之间的区别。

您可以将|= 与任何其他属性一起使用，但在将它与class 属性一起使用时要小心，因为它会忽略多个空格- 分隔的类名——它总是查看整个属性值或值的开头，而不是每个单独的类名。

例如，以下元素将匹配您的选择器，因为 e 和 e-c 出现在属性值的最开头:

<div class="e"></div>
<div class="e-c"></div>
<div class="e-c f"></div>

但是，这些元素都不会匹配您的选择器，因为值以 f 开头:

<div class="f e"></div>
<div class="f e-c"></div>

如果您需要在可能具有多个类的元素上匹配类前缀，我建议改用一组不同的属性选择器:

[class^="e-"], [class*=" e-"]

这将匹配上面列出的所有 .e-c 元素。参见 this other answer寻求解释。