Nazwy klas połączone lub rozdzielone spacją

Question

Kiedy oddzielasz klasy stylów od spacji? Na przykład: jaka jest różnica między następującymi dwoma blokami css?

Blok 1:

div { 
    color: brown; 
} 

div.special { 
    font-size: 18px; 
} 

Blok 2:

div { 
    color: brown; 
} 

div .special { 
    font-size: 18px; 
} 

Jest to HTML:

<div class="special">The quick brown fox jumps over the lazy dog.</div> 

Próbowałem obie wersje. Tylko z blokiem 1 tekst będzie miał rozmiar czcionki 18.

Answer 1

Oddzielasz klasy od spacji, gdy chcesz odwołać się do elementu potomnego i połączyć je, gdy chcesz odnieść się do pojedynczego elementu z wieloma klasami.

Na przykład, aby odnieść się do elementu div zawierającego dwie klasy, np. <div class="foo bar"> można użyć:

div.foo.bar {...} 

Aby odwołać się do elementu przęsła dziecięcej <div class="foo"><span class="bar">stuff</span></div> można użyć:

div.foo .bar {...} 

Answer 2

Przestrzeń zauważa, że ​​jest to pozycja dziecko.

IE

div.special 

cele div, który ma klasę special podczas

div .special 

cele element z klasą special wewnątrz div elementu

Answer 3

przestrzeni wskazuje gniazdowania:

div .foo /* .foo is inside div */ 

Brak miejsca wskazuje dalsze specyficzność:

div.foo /* any div that is also .foo */ 

Answer 4

div.special odnosi się do

<div class="special"> <- this 

div .special dotyczy

<div> 
    <p class="special"> <- this 
</div> 

Not neccassily p BTW

Answer 5

div.special wybierze element div która ma klasę .special i przyzwyczajenie wybrać dowolny inny element z klasą .special więc jeśli masz coś <ul class="special"> zostaną wykluczone, gdzie w tym div .special wybierze wszystkie elementy posiadające klasę .special które są zagnieżdżone wewnątrz div tak ten wyłoni <ul class="special"> tak stwierdzi, że 1st jeden jest bardziej restrykcyjne niż drugi

więc w twoim przypadku też może po prostu użyć .special lub użyć div.special