我可以将2个类应用于单个div或span或任何html元素吗?例如:
<a class="c1" class="c2">aa</a>
我试过,在我的情况下,c2没有得到应用。我怎样才能同时申请这两个班级?
答案 0 :(得分:139)
1)在class属性中使用多个类,用空格(ref)分隔:
<a class="c1 c2">aa</a>
2)要定位包含所有指定类的元素,请使用此CSS选择器(无空格)(ref):
.c1.c2 {
}
答案 1 :(得分:13)
将两个类字符串包含在单个类属性值中,其间有空格。
<a class="c1 c2" > aa </a>
答案 2 :(得分:10)
正如其他人所指出的,你只需用空格分隔它们。
但是,了解选择器如何工作也很有用。
考虑这段HTML ......
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
使用.a { ... }
作为选择器将选择第一个和第三个。但是,如果您要选择同时具有a
和b
的帐户,则可以使用选择器.a.b { ... }
。请注意,这在IE6中不起作用,只需选择.b
(最后一个)。
答案 3 :(得分:5)
<a class="c1 c2">aa</a>
答案 4 :(得分: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>
答案 5 :(得分:4)
用空格分隔。
<div class="c1 c2"></div>
答案 6 :(得分:0)
.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;
}
&#13;
<div class="box color">orderlist</div>
&#13;
.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;
}
&#13;
<div class="box color">orderlist</div>
&#13;
.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;
}
&#13;
<div class="box color">orderlist</div>
&#13;