Могу ли я применить 2 класса к одному div или span или любому элементу html? Например:
<a class="c1" class="c2">aa</a>
Я пробовал, и в моем случае 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>
.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>