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

Ответ 1

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

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

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

.c1.c2 {
}

Ответ 2

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

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

Ответ 3

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

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

Рассмотрим этот фрагмент HTML...

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

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

Ответ 4

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

Ответ 5

Это очень ясно, что для добавления двух классов в один 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>

Ответ 6

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

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

Ответ 7

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