這個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>不匹配