Wie wird CSS nur auf das erste untergeordnete div-Element angewendet?

Question

js Geige link # & togetherjs = GPrgjuTmSu

<div class = "node-master"> 
    <div class = "node-1"> 
    <div class ="node-content"> 
     child content 1 
    </div> 
    </div> 
    <div class = "node-2"> 
    <div class ="node-content"> 
     child content 2 
    </div> 
</div> 

Im Beispiel oben. Ich muss die CSS-Klasse "Child Content 1" als Ziel verwenden, um eine andere Schriftfarbe zu verwenden. Der Nachteil ist jedoch, dass ich nicht direkt auf node-1 zielen kann, weil das HTML erzeugt wird (dynalist.io app).

Die Einstellung Diktieren "Kind Inhalt 1" CSS-Syntax ist von node-master.

Im Grunde, was ich tun muss, ist eine CSS-Klasse, die Knoten-Master verwendet und wendet seine Eigenschaften auf das erste Kind <div>

Answer 1

Sie können mit :first-child CSS-Selektor, zum Beispiel spielen, wenn Sie das wollen Ziel erste div Kind .node-master:

.node-master > div:first-child { 
color: red; 
} 

Answer 2

können Sie den Wähler :first-child Pseudo auf dem übergeordneten verwenden:

Answer 3

dies ist die CSS-Elemente ohne Klassen Ziel

.node-master > div:nth-child(1){background-color:red;} 
.node-master > div:nth-child(2){background-color:blue;} 
... 
.node-master > div:nth-child(n){background-color:red;} 

Hope this Dank helfen können.

Answer 4

Sie müssen jeden der Knoten-Inhalt eindeutig sein haben, für die CSS

<div class = "node-master"> 
    <div class = "node-1"> 
    <div class ="node-content1"> 
     child content 1 
    </div> 
    </div> 
    <div class = "node-2"> 
    <div class ="node-content2"> 
     child content 2 
    </div> 
</div> 

zu erscheinen und stellen Sie dann einfach die Farbe Eigenschaft.

.node-content1 { 
    color: #1e00ef 
} 

.node-content2 { 
    color: #f44336 
} 

Hier gehen Sie: https://jsfiddle.net/fvw3xhv8/

Beifall und viel Glück