Esiste un selettore CSS solo per il primo figlio diretto?

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 il "colpo di testa" <div> .

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

Quello che hai pubblicato significa letteralmente "Trova tutti i div che si trovano all'interno dei div della sezione e sono il primo figlio del loro genitore". Il sottotitolo contiene un tag che corrisponde a quella descrizione.

Non mi è chiaro se desideri o meno entrambi i figli del div principale. In tal caso, utilizzare questo:

div.section > div

Se vuoi solo l'intestazione, usa questo:

div.section > div:first-child

Usando le >modifiche la descrizione diventa: "Trova eventuali div che sono i discendenti diretti dei div di sezione" che è quello che vuoi.

Tutti i principali browser supportano questo metodo, ad eccezione di IE6. Se il supporto IE6 è di importanza critica, dovrai aggiungere classi ai div figlio e usarlo, invece. Altrimenti, non vale la pena preoccuparsene.

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

.container > *:first-child
{
}

Il 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 saranno ereditate da quel divbambino 's divs:

div.section > div { color: red }

Ora, sia quello div che i suoi figli lo saranno red. Devi annullare tutto ciò che hai impostato sul genitore se non vuoi che erediti:

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

Ora solo quel singolo divche è un figlio diretto di div.sectionsarà rosso, ma i suoi figli divssaranno ancora neri.

div.section > div

Usa div.section > div.

Meglio ancora, usa un <h1>tag per l'intestazione e div.section h1nel tuo CSS, in modo da supportare i browser più vecchi (che non conoscono il >) e mantenere il markup semantico.

Il selettore CSS per il primo figlio diretto nel tuo caso è:

.section > :first-child

Il selettore diretto è> e il primo selettore figlio è: primo figlio

Non è necessario un asterisco prima di: come suggeriscono altri. Puoi velocizzare la ricerca DOM modificando questa soluzione anteponendo il tag:

div.section > :first-child