这个CSS（| =）是什么意思？这叫什么？

Question

我有一些代码，看起来像

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

是什么的| =是什么意思？我应该用Google搜索什么？

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

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。

Answer 2

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

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

而且一些例子：

1. <div class="e"></div>MATCH

2. <div class="ea"></div>不匹配

3. <div class="e-a"></div>MATCH

4. <div class="ae-"></div>不匹配