Come applicare i CSS per i bambini solo immediati di una certa classe

Question

Ho un div e in quel div voglio creare un altro div con una classe diversa e hanno l'interno div completamente separato dal div impostazioni CSS esterni.

Ti piace questa:

<div class="outer"> 
    <div><h1> h1 </h1><div> 
    <div class="inner"> 
     <h2> h2 </h2> 
    </div> 
    <h2> h2 </h2> 
</div> 

.outer h1{ color:blue; } 
.outer h2{ color:red; } 

.inner { height: 111px; } 

Quello che voglio è quello di disinserire il colore rosso dal h2 nel "inner" div

Potrebbe sembrare stupido non solo sovrappeso il colore al bianco qui, ma cosa succede se ho molti più argomenti nel CSS o anche se è dinamico.

Modifica: Suppongo che non sia chiaro, ma quello di cui ho bisogno è in realtà un po 'l'opposto delle risposte che ho ottenuto finora. Ho un div contenitore principale e ha molte impostazioni nel CSS. Ora voglio inserire un div nel main-container senza che abbia nessuna delle impostazioni CSS del contenitore principale.

Answer 1

.outer > h2 { color:red; } 

in questo modo solo il figlio diretto del div esterno ottiene questo valore di colore, dovrebbe risolvere il problema.

Answer 2

Penso che quello che vi serve è

.inner h2 {color: inherit} 

Answer 3

.outer .inner * { color: #000; } 

set di tutti gli elementi all'interno del contenitore interno come avere il colore nero.

Demo here