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

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;
}
Фатих Каан АЖИКГОЗ
источник