Esiste un selettore CSS solo per il primo bambino diretto?

Question

Ho il seguente html

<div class="section"> 
    <div>header</div> 
    <div> 
      contents 
      <div>sub contents 1</div>    
      <div>sub contents 2</div> 
    </div> 
</div> 

E il seguente stile:

DIV.section DIV:first-child 
{ 
    ... 
} 

Per qualche ragione che non capisco lo stile è sempre applicata ai "contenuti sub 1" <div> così come l'"intestazione"<div>.

Ho pensato che il selettore sullo stile si sarebbe applicato solo al primo figlio diretto di un div con una classe chiamata "sezione". Come posso cambiare il selettore per ottenere quello che voglio?

Answer 1

Quello che hai postato significa letteralmente "Trova tutti i div che si trovano all'interno delle sezioni div e sono il primo figlio del loro genitore". Il sub contiene un tag che corrisponde a quella descrizione.

Non è chiaro per me se si desiderano entrambi i figli del div principale o meno. In tal caso, utilizzare questo:

div.section > div 

Se si desidera solo l'intestazione, utilizzare questo:

div.section > div:first-child 

Utilizzando la > cambia la descrizione di: "trovare qualsiasi div che sono i discendenti diretti di sezione div "che è quello che vuoi

Si prega di notare che tutti i principali browser supportano questo metodo, tranne IE6. Se il supporto IE6 è mission-critical, dovrai invece aggiungere delle classi alle div del bambino e usarlo, invece. Altrimenti, non vale la pena prendersene cura.

Answer 2

div.section > div 

Answer 3

CSS si chiama Cascading Style Sheets perché le regole sono ereditate. Utilizzando il seguente selettore, sarà selezionare solo il figlio diretto del genitore, ma le sue regole sarà ereditato da quel div 's figli divs:

div.section > div { color: red } 

Ora, sia che dive suoi bambini sarà red. È necessario annullare tutto ciò si imposta sul genitore, se non si vuole che ereditare:

div.section > div { color: red } 
div.section > div div { color: black } 

Ora solo quel singolo div che è figlio diretto di div.section sarà rosso, ma i suoi figli divs sarà ancora essere nero

Answer 4

Utilizzare div.section > div.

Meglio ancora, utilizzare un tag <h1> per l'intestazione e div.section h1 nel CSS, in modo da sostenere i vecchi browser (che non conoscono la >) e mantenere il markup semantico.

Answer 5

Trovato questa domanda cercando su Google. Ciò restituirà il primo figlio di un elemento con la classe container, indipendentemente dal tipo di figlio.

.container > *:first-child 
{ 
}