Wie wende ich einen Stil an alle untergeordneten Elemente eines Elements an

Question

Ich habe ein Element mit class='myTestClass'. Wie wende ich einen CSS-Stil an alle Kinder dieser Elemente an? Ich möchte nur den Stil auf die Elemente Kinder anwenden. Nicht seine Enkelkinder.

I

.myTestClass > div { 
    margin: 0 20px; 
} 

die Arbeit für alle div Kinder verwenden könnte, aber ich eine Lösung möchte, die für alle Kinder arbeitet. Ich dachte, ich * verwenden könnte, aber

.myTestClass > * { 
    margin: 0 20px; 
} 

funktioniert nicht.

bearbeiten

Der .myTestClass > * Selektor gilt nicht die Regel in Firefox 26, und es gibt keine andere Regel für Spielraum nach Firebug. Und es funktioniert, wenn ich * durch div ersetze.

Answer 1

Wie von David Thomas kommentiert, werden Nachkommen dieser untergeordneten Elemente (wahrscheinlich) die meisten Stile erben, die diesen untergeordneten Elementen zugewiesen sind.

Sie müssen Ihre .myTestClass innerhalb eines Elements umhüllen und die Stile auf Nachkommen anwenden, indem Sie .wrapper *descendant selector hinzufügen. Fügen Sie dann .myTestClass > *child selector hinzu, um den Stil auf die Elemente children anzuwenden, nicht auf die grand children. Zum Beispiel wie folgt aus:

JSFiddle - DEMO

.wrapper * { 
 
    color: blue; 
 
    margin: 0 100px; /* Only for demo */ 
 
} 
 
.myTestClass > * { 
 
    color:red; 
 
    margin: 0 20px; 
 
}

<div class="wrapper"> 
 
    <div class="myTestClass">Text 0 
 
     <div>Text 1</div> 
 
     <span>Text 1</span> 
 
     <div>Text 1 
 
      <p>Text 2</p> 
 
      <div>Text 2</div> 
 
     </div> 
 
     <p>Text 1</p> 
 
    </div> 
 
    <div>Text 0</div> 
 
</div>