2011-09-22 12 views
6

Volevo dare a tutti gli elementi div del bambino un colore di sfondo del div del genitore. Ma, come vedo, lo stile dei div di bambini sovrascrive lo stile del genitore anche se i figli non avevano quella proprietà. Ad esempio,Forzare le div del bambino per usare lo stile del genitore

Parent's div 
<div style="background-color:#ADADAD;"> 
some codes here... 
child's div 
<div style="position:absolute;font-size:12px; left:600px;top:100px;"> 
again some codes... 
</div></div> 

Qui, se si elimina lo stile di div figlio, funziona correttamente. Penso che il mio problema potrebbe essere risolto se ho fatto la stessa cosa con file css esterno anche. Ma ho già fatto centinaia di div esattamente come questo. Quindi, c'è comunque di forzare lo stile di genitore di stile del bambino, solo per background-color? (Nuova nel css)

+1

"Ho già fatto centinaia di div esattamente così ..." Sono così, così dispiaciuto. – Larsenal

+0

Almeno, ho imparato qualcosa oggi :) – user893970

+0

Questa è l'atteggiamento giusto. – Larsenal

risposta

5

Ma, per come la vedo, lo stile lo stile di genitore sovrascrittura div chid, anche se il figlio di non ha avuto che proprietà.

No, solo che non ereditano il valore di default, in modo da ottenere qualsiasi valore che avrebbero altrimenti (che di solito è transparent).

È possibile (in teoria) ottenere ciò che si desidera con il colore di sfondo: inherit. Questo ha lo problems in older versions of IE.

2

Utilizzare la proprietà ereditare sul div bambino:

background:inherit 

<div style="position:absolute;font-size:12px; left:600px;top:100px; background:inherit"> 
2

selettori Usare CSS come questo per rendere lo sfondo del div bambino di ereditare da loro genitori:

Parent's div 
<div id="thisparticulardiv"> 
some codes here... 
child's div 
<div class="childrendiv"> 
again some codes... 
</div></div> 

CSS:

#thisparticulardiv { 
    background-color:#ADADAD; 
    ... 
} 

#thisparticulardiv div { 
    background: inherit; 
    position:absolute; 
    font-size:12px; 
    left:600px; 
    top:100px; 
} 
Problemi correlati