Jak mogę zastosować style do wielu klas jednocześnie?

277

Chcę, aby dwie klasy o różnych nazwach miały tę samą właściwość w CSS. Nie chcę powtarzać kodu.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>
Rozwiń fragment kodu

Ponieważ obie klasy robią to samo, powinienem być w stanie połączyć je w jedną. Jak mogę to zrobić?

css css-selectors sob
źródło

Odpowiedzi:

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

jest tym, czego szukasz.

Juraj Blahunka
źródło
6
+1, dokładnie to, czego szukałem. Możesz także mieć drugi, osobny wpis dla .abc i / lub .xyz dla właściwości, których nie chcesz stosować do obu, np. .Xyz {font-weight: bold;} połączy się, aby .xyz pogrubić i margines left'ed o 20px, ale .abc tylko margin-left'ed.
RyanfaeScotland
64

Możesz mieć wiele deklaracji CSS dla tych samych właściwości, oddzielając je przecinkami:

.abc, .xyz {
   margin-left: 20px;
}
zombat
źródło
1
chociaż wybrana odpowiedź jest całkowicie poprawna, nie możemy zagwarantować, że początkujący zrozumieją, co robi. Chciałbym pójść z tym, który wyjaśnił więcej. Ponieważ chodzi bardziej o „jak łowić ryby” niż o „tu jest ryba”.
Olgun Kaya,
15

Nie powtarzaj swojego CSS

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

LUB

 a{
    margin-left:20px;
 }
Nitekurs
źródło
2
Myślę, że abcmiało to oznaczać jedną nazwę klasy ... i xyzinną. Sugerujesz, aby użyć wspólnej nazwy klasy dla wspólnych właściwości, która jest zbędna i myląca, biorąc pod uwagę pytanie.
Arete,
3

Jeśli użyjesz w następujący sposób, Twój kod może być bardziej skuteczny niż napisałeś. Powinieneś dodać kolejną funkcję.

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

LUB

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

LUB

a {
margin-left:20px;
width: 100px;
height: 100px;
}
Fatih Kaan AÇIKGÖZ
źródło