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

105

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

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

.classA .classB {
  border: 1px solid;
}
Quentin
źródło

Odpowiedzi:

105

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

Williham Totland
źródło
44

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


źródło
2
Pomocne jest wyświetlenie przypadku, którego nie udało się rozwiązać
Hal50000
-1

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

Amarnath Vishwakarma
źródło
2
To prawda, ale odpowiedź na to pytanie była już poprawna dziesięć lat temu; tak naprawdę nie potrzebowała nowej odpowiedzi.
Brilliand