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

我有一些看起来像的代码

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

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

我尝试搜索stackoverflow(可以找到标点符号)和谷歌,但很难搜索没有名称.

这被称为 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.