stosuje styl css do klasy zagnieżdżonej wewnątrz div

Question

Nie wiem dokładnie, jak zastosować css do zagnieżdżonego elementu. Oto mój przykładowy kod, ale szukam instrukcji wyjaśniającej wszystkie reguły.

<div id="content"> 
    <div id="main_text"> 
     <h2 class="title"></h2> 
    </div> 
</div> 

Jak mogę zastosować css tylko klasy title zagnieżdżony wewnątrz danej div?

Answer 1

użyć

#main_text .title 
{ 
    /*attributes*/ 
} 

jeśli po prostu umieścić spację między selektorów, style będą miały zastosowanie do wszystkich dzieci i dzieci (dzieci) pierwszego. W tym przypadku, każdy element podrzędny #main_text z nazwą klasy .title. Jeśli używasz > zamiast przestrzeni, będzie wybrać tylko bezpośrednie dziecko elementu, a nie dzieci dzieci, ex:

#main_text>.title 
{ 
    /*attributes*/ 
} 

albo zadziała w tym przypadku, ale pierwszy jest częściej używany.