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

Question

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

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

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

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

14549 7

html css

7 ответов:

Comments

Ничего не найдено.

Salman A · Accepted Answer · 2014-11-23 11:00:49

1) Используйте несколько классов внутри атрибута class, разделенных пробелами ( ref):
<a class="c1 c2">aa</a>
2) для назначения элементов, содержащих все указанные классы, используйте этот селектор CSS (нет пространства) ( ref):
.c1.c2 {
}

Steve Jorgensen · Accepted Answer · 2011-03-30 09:27:30

включить обе строки класса в одно значение атрибута класса, с пробелом между ними.
<a class="c1 c2" > aa </a>

alex · Accepted Answer · 2011-03-30 09:43:26

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

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

рассмотрим этот фрагмент HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
используя .a { ... } в качестве селектора будет выбран первый и третий. Однако, если вы хотите выбрать тот, который имеет оба a и b, вы можете использовать селектор .a.b { ... }. Обратите внимание, что это не будет работать в IE6, просто выберите .b (последний).

user2757598 · Accepted Answer · 2013-09-07 21:47:18

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

4

2013-09-07 21:47:18

Aravind Suresh · Accepted Answer · 2016-08-14 15:04:48

разделите их пробелом.
<div class="c1 c2"></div>

vivek Khanna · Accepted Answer · 2016-05-05 23:03:45

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

Abhay shah · Accepted Answer · 2017-08-10 13:50:24

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

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

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