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

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