Tek bir öğeye iki CSS sınıfı nasıl uygulanır

Tek bir div veya span veya herhangi bir html öğesine 2 sınıf uygulayabilir miyim? Örneğin:

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

Denedim ve benim durumumda c2 uygulanmıyor. Her iki sınıfı aynı anda nasıl uygulayabilirim?

1) Sınıf özniteliği içinde boşluklarla ( ref ) ayrılmış birden çok sınıf kullanın :

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

2) Belirtilen sınıfların tümünü içerir hedef elemanları için, bu CSS seçici (kullanmak boşluk ) ( ref ):

.c1.c2 {
}

Her iki sınıf dizesini de aralarında boşluk bırakarak tek bir sınıf öznitelik değerine dahil edin.

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

Başkalarının da belirttiği gibi, onları bir boşlukla sınırlandırmanız yeterlidir.

Bununla birlikte, seçicilerin nasıl çalıştığını bilmek de yararlıdır.

Bu HTML parçasını düşünün ...

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

.a { ... }Bir seçici olarak kullanmak birinci ve üçüncüyü seçecektir. Her iki sahiptir birini seçmek istiyorsanız Ancak, ave b, sen seçiciyi kullanabilirsiniz .a.b { ... }. Bunun IE6'da çalışmayacağını, basitçe .b(sonuncusu) seçeceğini unutmayın .

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

Tek bir div'e iki sınıf eklemek için önce sınıfları oluşturmanız ve sonra onları birleştirmeniz gerektiği çok açıktır. Bu işlem, değişiklik yapmak ve no. sınıfların. Web sitesini sıfırdan yapanlar çoğunlukla bu tür yöntemleri kullandılar. birinci sınıf renk için ve ikinci sınıf genişlik, yükseklik, yazı tipi stilini vb. ayarlamak için iki sınıf oluştururlar. Her iki sınıfı birleştirdiğimizde, o zaman birinci sınıf ve ikinci sınıf etkin olur.

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

Bir boşlukla ayırın.

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