Perché div # foo hr: first-child non funziona

Question

Mi sento come se dovesse funzionare, se riesci a dire #foo p: first-child perché #foo hr: first-child non funziona. Se qualcuno può spiegarlo, lo apprezzerei davvero.

Ho installato una demo JSFiddle qui - http://jsfiddle.net/mGu7x/6/

Answer 1

Nessuno degli <hr> elementi sono il primo figlio del loro elemento genitore.

Vedere this updated demo che rende il bordo più ovvio e sposta l'ora in alto.

Si potrebbe voler guardare :first-of-type che è nuovo in CSS 3 e fa quello che sembra essere alla ricerca di. (Posso usare suggests that it has wide support al di fuori di IE non corrente).

Vedere a demo using :first-of-type (che ho testato solo in Chrome).

Answer 2

Perché #main 's first-child è un p, non un hr.

È possibile utilizzare nth-child però:

#main hr:nth-child(2) { 
    border-bottom: 3px solid green; 
}