CSS的多類

Question

我想，如果有可能使用相同的名稱使用CSS多類有一個例外的iterator中：

<div class="elem-1"></div> 

<div class="elem-2"></div> 

如果有可能，我應該怎麼用我的CSS實現這兩個類（可以多於2個）？

Answer 1

你可以使用CSS屬性選擇這樣的：

[class^="elem-"], [class*=" elem-"] { 
    /* style properties */ 
} 

但我寧願建議使用2類這樣

<div class="elem specialStuffClass">...</div> 

另一種選擇可能是使用計數選擇像第n個孩子。

Answer 2

通常，您應該在HTML中使用多個類。

<div class="shape shape-3-corners"></div> 
<div class="shape shape-4-corners"></div> 

兩個div都在表示形狀的div組中。

只有一個div表示具有特定角數的形狀的每個組中。

---

你也可以看看pattern matching with attribute selectors。不幸的是，語法有些有限。

[class*="elem-"]將適用於您的特定示例，但會爲您提供class="not-elem-3"的誤報。

[class^="elem-"]將適用於您的特定示例，但會爲您提供class="another-class and elem-3"的假陰性結果。

---

你也可以group您的選擇：

.elem-1, 
.elem-2 { } 

...但你必須指定每一個數字，如果你加入了更多更新的CSS。如果你有很多，它會變得相當笨拙。