Wie kann ich Stile auf mehrere Klassen gleichzeitig anwenden?

276

Ich möchte, dass zwei Klassen mit unterschiedlichen Namen dieselbe Eigenschaft in CSS haben. Ich möchte den Code nicht wiederholen.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

Erweitern Sie das Snippet

Da beide Klassen dasselbe tun, sollte ich es zu einer zusammenführen können. Wie kann ich das machen?

css css-selectors

— saß
quelle

543

.abc, .xyz { margin-left: 20px; }

ist das, wonach Sie suchen.

— Juraj Blahunka
quelle

6

+1, genau das, wonach ich gesucht habe. Sie können dann auch einen zweiten separaten Eintrag für .abc und / oder .xyz für Eigenschaften haben, die Sie nicht auf beide anwenden möchten, z. B. .xyz {font-weight: bold;} wird kombiniert, um .xyz fett und margin- zu machen. links um 20px, aber .abc nur am Rande links.

— RyanfaeScotland

64

Sie können mehrere CSS-Deklarationen für dieselben Eigenschaften haben, indem Sie sie durch Kommas trennen:

.abc, .xyz {
   margin-left: 20px;
}

— Zombat
quelle

1

Obwohl die ausgewählte Antwort völlig korrekt ist, können wir nicht garantieren, dass Neulinge verstehen, was sie tut. Ich würde mit dem mehr erklärt gehen. Da es mehr um "wie man fischt" geht als um "hier ist der Fisch".

— Olgun Kaya

15

Wiederholen Sie Ihr CSS nicht

 a.abc, a.xyz{
    margin-left:20px;
 }

ODER

 a{
    margin-left:20px;
 }

— Nitekurs
quelle

2

Ich denke, abces war als ein Klassenname gedacht ... und xyzals ein anderer. Ihr Vorschlag ist, einen gemeinsamen Klassennamen für allgemeine Eigenschaften zu verwenden, was angesichts der Frage unnötig und verwirrend ist.

— Arete

3

Wenn Sie Folgendes verwenden, kann Ihr Code effektiver sein als Sie geschrieben haben. Sie sollten eine weitere Funktion hinzufügen.

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
}

ODER

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
}

ODER

a {
margin-left:20px;
width: 100px;
height: 100px;
}

— Fatih Kaan AÇIKGÖZ
quelle