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

Question

我有一些看起来像的代码

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

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

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

Answer 1

这被称为属性选择器.具体来说,|=属性选择器查找具有给定属性的元素,其值与给定值完全匹配,或者以给定值开始,后面紧跟一个-(前缀,如果可以).

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

• 是e,或
• 从...开始e-.

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

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

请注意,|=它通常与语言属性一起使用,例如hreflang和lang,虽然在后者的情况下,:lang()通常是首选 - 这个答案解释了两者之间的差异.

您可以使用|=任何其他属性,但在将其与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上面列出的所有元素.请参阅此其他答案以获得解释.