Як я можу застосувати стилі до кількох класів одночасно?

277

Я хочу, щоб два класи з різними іменами мали однакову властивість у CSS. Я не хочу повторювати код.

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

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

Розгорніть фрагмент

Оскільки обидва заняття роблять одне і те ж, я повинен мати можливість об'єднати його в один. Як я можу це зробити?

css css-selectors

— сидів
джерело

545

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

це те, що ви шукаєте.

— Юрай Блахунка
джерело

6

+1, саме те, що я шукав. Потім ви можете мати другий окремий запис для .abc та / або .xyz для властивостей, які ви не хочете застосовувати до обох, наприклад .xyz {font-weight: bold;} поєднується, щоб зробити .xyz жирним і margin- left'ed на 20 пікселів, але .abc лише марж-left'ed.

— RyanfaeScotland

64

Ви можете мати кілька оголошень CSS для одних і тих же властивостей, відокремлюючи їх комами:

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

— зомбат
джерело

1

хоча обрана відповідь цілком правильна, ми не можемо гарантувати, що новачки зрозуміють, що це робить. Я б пішов з тим, хто пояснив більше. Оскільки це більше «як ловити рибу», а не «ось риба».

— Olgun Kaya

15

Не повторюйте свій CSS

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

АБО

 a{
    margin-left:20px;
 }

— Нітекур
джерело

2

Я думаю, abcмалося на увазі як одна назва класу .. і xyzяк інша. Ваша пропозиція - використовувати загальну назву класу для загальних властивостей, що є непотрібним і заплутаним, враховуючи питання.

— Арете

3

Якщо ви використовуєте наступне, ваш код може бути ефективнішим, ніж ви писали. Вам слід додати ще одну функцію.

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

АБО

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

АБО

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

— Фатих Каан AÇIKGÖZ
джерело