如何将两个CSS类应用于单个div/span

Question

我可以将2个类应用于单个div或span或任何html元素吗？例如:

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

我试过,在我的情况下,c2没有得到应用.我怎样才能同时申请这两个课程？

Answer 1

1)在class属性中使用多个类,用空格(ref)分隔:

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

2)要定位包含所有指定类的元素,请使用此CSS选择器(无空格)(ref):

.c1.c2 {
}

Answer 2

在单个类属性值中包含两个类字符串,中间包含空格.

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

Answer 3

正如其他人所指出的那样,你只需用空格划分它们.

但是,了解选择器如何工作也很有用.

考虑一下这个HTML ...

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

使用.a { ... }选择器将选择第一个和第三个.但是,如果你想选择一个同时具有a与b,你可以使用选择.a.b { ... }.请注意,这在IE6中不起作用,它只会选择.b(最后一个).

Answer 4

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

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