Html 如何将两个 CSS 类应用于单个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5482677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply two CSS classes to a single element
提问by dojoX
Can i apply 2 classes to a single div or span or any html element? For example:
我可以将 2 个类应用于单个 div 或 span 或任何 html 元素吗？例如：
<a class="c1" class="c2">aa</a>
I tried and in my case c2 does not get applied. How can i apply both classes at once?
我试过了，在我的情况下 c2 没有得到应用。我怎样才能同时申请两个课程？
回答by Salman A
回答by Steve Jorgensen
Include both class strings in a single class attribute value, with a space in between.
在单个类属性值中包含两个类字符串，中间有一个空格。
<a class="c1 c2" > aa </a>
回答by alex
As others have pointed out, you simply delimit them with a space.
正如其他人指出的那样，您只需用空格分隔它们即可。
However, knowing how the selectors work is also useful.
但是，了解选择器的工作方式也很有用。
Consider this piece of HTML...
考虑一下这段 HTML...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>
Using .a { ... }as a selector will select the first and third. However, if you want to select one which has both aand b, you can use the selector .a.b { ... }. Note that this won't work in IE6, it will simply select .b(the last one).
使用.a { ... }作为选择将选择第一和第三。但是，如果要选择同时具有a和 的一个，则b可以使用选择器.a.b { ... }。请注意，这在 IE6 中不起作用，它只会选择.b（最后一个）。
回答by user2757598
<a class="c1 c2">aa</a>
回答by vivek Khanna
This is very clear that to add two classes in single div, first you have to generate the classes and then combine them. This process is used to make changes and reduce the no. of classes. Those who make the website from scratch mostly used this type of methods. they make two classes first class is for color and second class is for setting width, height, font-style, etc. When we combine both the classes then the first class and second class both are in effect.
这很清楚，要在单个 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>回答by Aravind Suresh
Separate 'em with a space.
用空格分隔它们。
<div class="c1 c2"></div>
回答by Abhay shah
.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>