Question

我有一些看起来像

的代码

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

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

我尝试搜索stackoverflow（可以找到标点符号）和谷歌，但很难搜索没有名字。

Answer 1

这被称为attribute selector。具体来说，|= attribute selector查找具有给定属性的元素，其值与给定值完全匹配，或者以给定值开头，后面紧跟-（前缀，如果可以的话）。

您的选择器会匹配class属性的元素，其值为：

它等同于以下两个属性选择器的组合结果：

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

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

你可以将|=与任何其他属性一起使用，但在使用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 answer。

Answer 2

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

选择其class属性包含完全为“e”的值的所有元素，或以“e - ”开头。

还有一些例子：