如何將兩個CSS類應用於單個div/span

Question

我可以將2個類應用於單個div或跨度或任何html元素嗎？例如：

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

我試過了，在我的情況下，c2沒有得到應用。我怎樣才能一次申請兩個班？

Answer 1

1）使用類屬性內多個類，由空格分開（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中添加兩個類，首先必須生成這些類然後將它們合併。這個過程用於進行更改並減少no。的類。那些從頭開始創建網站的人主要使用這種類型的方法。他們使兩個班的第一類是顏色和第二類是用於設置寬度，高度，字體樣式等。 當我們結合這兩個類然後第一類和第二類都在 效應。

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

Answer 6

單獨的「時間與空間。

<div class="c1 c2"></div> 

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

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