如何将两个 CSS 类应用于单个元素答案

【问题标题】：How to apply two CSS classes to a single element如何将两个 CSS 类应用于单个元素
【发布时间】：2011-07-25 20:34:21
【问题描述】：

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

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

我试过了，在我的情况下，c2 没有得到应用。如何同时申请两个课程？

【问题讨论】：

标签： html css

【解决方案1】：

1）在class属性内使用多个类，用空格分隔（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;
}

&lt;div class="box color"&gt;orderlist&lt;/div&gt;

【讨论】：

【解决方案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;
}

&lt;div class="box color"&gt;orderlist&lt;/div&gt;

【讨论】：

虽然这可能会回答问题，但也请添加简短说明您的代码做了什么以及为什么它解决了最初的问题。