Co oznacza spacja w selektorze CSS? tj. Jaka jest różnica między .classA.classB i .classA .classB?

Jaka jest różnica między tymi dwoma selektorami?

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

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

.classA.classBodnosi się do elementu, który ma obie klasy A i B ( class="classA classB"); natomiast .classA .classBodnosi się do elementu z class="classB"potomkiem elementu z class="classA".

Edycja: Specyfikacja dla odniesienia: Selektory atrybutów (patrz sekcja 5.8.3 Selektory klas)

Taki styl jest znacznie bardziej powszechny i ​​jest przeznaczony dla dowolnego typu elementu klasy „classB”, który jest zagnieżdżony w dowolnym elemencie klasy „classA”.

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

Działałby na przykład na:

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

Ten jednak jest przeznaczony dla dowolnego typu elementu, który jest zarówno klasą „classA”, jak i klasą „classB”. Ten typ stylu jest rzadziej spotykany, ale w niektórych okolicznościach nadal jest przydatny.

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

Dotyczyłoby to tego przykładu:

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

Nie miałoby to jednak wpływu na:

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

(Zwróć uwagę, że jeśli element HTML ma wiele klas, są one oddzielone spacjami).

.classA.classBoznacza to, że wybrane zostaną elementy o nazwach obu klas, natomiast .classA .classBoznacza, że wybrany zostanie tylko element z nazwą klasy classBwewnątrz classA.