1つのdiv/spanに2つのCSSクラスを適用する方法

Question

1つのdivまたはspanまたは任意のhtml要素に2つのクラスを適用できますか？例：

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

私の場合はc2が適用されませんでした。一度に両方のクラスをどのように適用できますか？このCSSセレクタ（ない空間を使用し、指定されたクラスの全てを含む要素を標的とする

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

2）：

Answer 1

1）空白（ref）によって分離されたクラス属性内部複数のクラスを使用し）（ref）：

.c1.c2 { 
} 

Answer 2

は、間にスペースを、単一クラス属性値の両方のクラスの文字列を含めます。他の人が指摘したように

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

Answer 3

、あなたは単にスペースでそれらを区切ります。

しかし、セレクタがどのように機能するかを知ることも有用です。第一及び第三選択しますセレクタとして.a { ... }を使用して

HTMLのこの作品を考えてみましょう

...

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

。ただし、aとbの両方を選択する場合は、セレクタ.a.b { ... }を使用できます。これはIE6では機能しませんので、単に.b（最後のもの）を選択します。

Answer 4

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

Answer 5

これは、1つのdivに2つのクラスを追加するには、最初にクラスを生成してから結合する必要があることは明らかです。このプロセスは、変更を行い、番号を減らすために使用されます。クラスの最初からウェブサイトを作った人は、ほとんどこのタイプのメソッドを使いました。それらは2つのクラスを作成します。ファーストクラスはカラー用で、セカンドクラスは幅、高さ、フォントスタイルなどを設定します。 両方のクラスを結合すると、ファーストクラスとセカンドクラスの両方が になります。

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