Come posso applicare gli stili a più classi contemporaneamente?

277

Voglio che due classi con nomi diversi abbiano la stessa proprietà nei CSS. Non voglio ripetere il codice.

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

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

Espandi frammento

Poiché entrambe le classi stanno facendo la stessa cosa, dovrei essere in grado di unirle in una. Come lo posso fare?

css css-selectors

— sat
fonte

545

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

è quello che stai cercando.

— Juraj Blahunka
fonte

6

+1, esattamente quello che stavo cercando. È inoltre possibile disporre di una seconda voce separata per .abc e / o .xyz per le proprietà che non si desidera applicare ad entrambi. Ad es. lasciato da 20px ma .abc ha lasciato solo il margine.

— Ryanfae Scozia,

64

Puoi avere più dichiarazioni CSS per le stesse proprietà separandole con virgole:

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

— zombat
fonte

1

sebbene la risposta selezionata sia completamente corretta, non possiamo garantire che i neofiti capiranno cosa sta facendo. Vorrei andare con quello spiegato di più. Dal momento che è più di "come pescare" invece di "ecco il pesce".

— Olgun Kaya,

15

Non ripetere il tuo CSS

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

O

 a{
    margin-left:20px;
 }

— Nitekurs
fonte

2

Penso abcfosse inteso come un nome di classe .. e xyzcome un altro. Il tuo suggerimento è di usare un nome di classe comune per proprietà comuni che è superfluo e confuso, data la domanda.

— Arete,

4

Se lo usi come segue, il tuo codice può essere più efficace di quello che hai scritto. Devi aggiungere un'altra funzione.

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

O

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

O

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

— Fatih Kaan AÇIKGÖZ
fonte