Css für mehrere Klasse

Question

Ich mag gerne wissen, ob es möglich ist, CSS für mehrere Klasse mit dem gleichen Namen in einem Iterator mit einer Ausnahme zu verwenden:

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

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

Wenn es möglich ist, wie soll ich meine CSS um diese zwei Klassen zu implementieren (kann viel mehr als 2 sein)?

Answer 1

könnten Sie CSS-Attribut-Selektoren wie folgt aus:

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

Aber ich würde eher wie dieses

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

eine weitere Option zu verwenden, 2 Klassen könnte darauf hindeuten, sein Zählen Selektoren zu verwenden, wie n-te-Kind .

Answer 2

Im Allgemeinen sollten Sie mehrere Klassen im HTML verwenden.

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

Beide Divs sind in der Gruppe von Divs, die Formen darstellen.

In jeder Gruppe gibt es nur ein div, das Formen mit einer bestimmten Anzahl von Ecken darstellt.

---

könnten Sie auch bei pattern matching with attribute selectors aussehen. Leider ist die Syntax etwas eingeschränkt.

[class*="elem-"] würde für Ihr bestimmtes Beispiel arbeiten, aber geben Sie falsche positive Ergebnisse für class="not-elem-3".

[class^="elem-"] würde für Ihr bestimmtes Beispiel funktionieren, aber geben Sie falsche negative für class="another-class and elem-3".

---

Sie könnten auch group Ihre Selektoren:

.elem-1, 
.elem-2 { } 

... aber dann würden Sie jede Zahl angeben müssen, und die CSS aktualisieren, wenn Sie mehr hinzugefügt. Wenn du viel hättest, würde es ziemlich unhandlich werden.