2つのCSSクラスを単一の要素に適用する方法

Question 1

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

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

私は試しましたが、私の場合c2は適用されません。両方のクラスを一度に適用するにはどうすればよいですか？

Question 2

1）空白（ref）で区切られたclass属性内で複数のクラスを使用します。

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

2）指定されたすべてのクラスを含む要素をターゲットにするには、このCSSセレクターを使用します（スペースなし）（ref）：

.c1.c2 {
}

Question 3

両方のクラス文字列を、間にスペースを入れて、単一のクラス属性値に含めます。

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

Question 4

他の人が指摘したように、スペースで区切るだけです。

ただし、セレクタがどのように機能するかを知ることも役立ちます。

このHTMLを検討してください...

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

.a { ... }セレクタとして使用すると、最初と3番目が選択されます。ただし、aとの両方がある1つを選択bする場合は、セレクタを使用できます.a.b { ... }。これはIE6では機能せず、単に選択するだけです.b（最後のもの）。

Question 5

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

Question 6

これは、1つのdivに2つのクラスを追加するには、まずクラスを生成してから、それらを結合する必要があることは明らかです。このプロセスは、変更を行い、NOを減らすために使用されます。クラスの。Webサイトを最初から作成する人は、主にこのタイプの方法を使用していました。最初のクラスは色用、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>

スニペットを展開

Question 7

スペースで区切ります。

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

Question 8

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

スニペットを展開