Как применить два класса CSS к одному элементу

Могу ли я применить 2 класса к одному div или span или любому элементу html? Например:

<a class="c1" class="c2">aa</a>

Я пробовал, и в моем случае c2 не применяется. Как я могу применить оба класса одновременно?

1) Используйте несколько классов внутри атрибута class, разделенных пробелом ( ref ):

<a class="c1 c2">aa</a>

2) Чтобы настроить таргетинг на элементы, содержащие все указанные классы, используйте этот селектор CSS ( без пробела ) ( ссылка ):

.c1.c2 {
}

Включите обе строки класса в одно значение атрибута класса с пробелом между ними.

<a class="c1 c2" > aa </a>

Как отмечали другие, вы просто ограничиваете их пробелом.

Однако знание того, как работают селекторы, также полезно.

Рассмотрим этот кусок HTML ...

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>

Использование .a { ... }в качестве селектора выберет первый и третий. Однако, если вы хотите выбрать тот, который имеет оба aи b, вы можете использовать селектор .a.b { ... }. Обратите внимание, что это не будет работать в IE6, он просто выберет .b(последний).

<a class="c1 c2">aa</a>

Совершенно очевидно, что для добавления двух классов в один div сначала необходимо сгенерировать классы, а затем объединить их. Этот процесс используется для внесения изменений и уменьшения количества нет. классов. Такими методами чаще всего пользовались те, кто делает сайт с нуля. они создают два класса: первый класс предназначен для цвета, а второй класс - для установки ширины, высоты, стиля шрифта и т. д. Когда мы объединяем оба класса, то действуют первый и второй класс.

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

Разделите их пробелом.

<div class="c1 c2"></div>