CSS seçicide boşluk ne anlama gelir? ör. .classA.classB ve .classA .classB arasındaki fark nedir?

Bu iki seçici arasındaki fark nedir?

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

.classA.classBhem A hem de B sınıflarına sahip bir öğeyi ifade eder ( class="classA classB"); oysa .classA .classBbir öğeden class="classB"türemiş bir öğeyi ifade eder class="classA".

Düzenleme: Referans için spesifikasyon: Özellik Seçiciler (Bkz. Bölüm 5.8.3 Sınıf Seçiciler)

Bunun gibi bir stil çok daha yaygındır ve "classA" sınıfının herhangi bir türü öğesinin içine yerleştirilmiş "classB" sınıfının her tür öğesini hedefler.

.classA .classB {
  border: 1px solid; }

Örneğin şunlarda çalışır:

<div class="classA">
  <p class="classB">asdf</p>
</div>

Ancak bu, hem "classA" sınıfı hem de "classB" sınıfı olan herhangi bir öğeyi hedefler. Bu tarz tarz daha az görülür, ancak bazı durumlarda yine de faydalıdır.

.classA.classB {
  border: 1px solid; }

Bu, bu örnek için geçerli olacaktır:

<p class="classA classB">asdf</p>

Ancak, aşağıdakiler üzerinde hiçbir etkisi olmayacaktır:

<p class="classA">fail</p>
<p class="classB">fail</p>

(Bir HTML öğesi birden çok sınıfa sahip olduğunda, bunların boşluklarla ayrıldığını unutmayın.)

.classA.classBbu, her iki sınıf adına sahip öğelerin seçileceği .classA .classBanlamına gelirken , classBiçinde sınıf adı olan öğenin classAyalnızca seçileceği anlamına gelir .