Как я могу применить стили к нескольким классам одновременно?

277

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

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

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

Развернуть фрагмент

Поскольку оба класса делают одно и то же, я должен объединить их в один. Как я могу это сделать?

css css-selectors

— Суббота
источник

546

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

это то, что вы ищете.

— Юрай Блахунка
источник

6

+1, именно то, что я искал. Затем вы также можете иметь вторую отдельную запись для .abc и / или .xyz для свойств, которые вы не хотите применять к обоим, например .xyz {font-weight: bold;} объединит, чтобы сделать .xyz жирным и margin- оставил на 20px, но .abc только на полях.

— RyanfaeScotland

64

Вы можете иметь несколько объявлений CSS для одних и тех же свойств, разделяя их запятыми:

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

— zombat
источник

1

хотя выбранный ответ является полностью правильным, мы не можем гарантировать, что новички поймут, что он делает. Я бы пошел с тем, что объяснил больше. Так как это больше «как рыбачить», а не «вот рыба».

— Олгун Кая

15

Не повторяйте свой CSS

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

ИЛИ

 a{
    margin-left:20px;
 }

— Nitekurs
источник

2

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

— Арете

4

Если вы используете следующее, ваш код может быть более эффективным, чем вы написали. Вы должны добавить еще одну функцию.

.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;
}

— Фатих Каан АЖИКГОЗ
источник