Dynamischer CSS-Selektor in der Angular.js-App

Question

Ich arbeite an einer Angular.js-App mit einer Ebenenansicht, die Objekte enthält. Jedes Mal, wenn der Benutzer ein Element aus der linken Menüleiste in die Mitte des Bildschirms zieht, wird ein neues Objekt initiiert.

Der CSS-Selektor jedes Element sieht wie folgt aus:

#drag-item-0 

    #drag-item-1 

    #drag-item-2 

usw.

Also im Grunde jede inStation eines Objekts leeds zu einem neuen CSS-Selektor. Ich muss jedem Objekt ein anderes CSS-Styling geben, aber ich weiß nicht, wie der entsprechende CSS-Selektor aussehen würde. Jede Hilfe oder Hinweise wären willkommen, danke!

Answer 1

Wenn das sind Kinder Elemente eines, sagen wir <div Id="elid"><\div> können Sie die nth-child(pos) verwenden, wobei pos die Kinderelementposition ist.

Wie #elid:nth-child(2), um das zweite Kind Element des Div.

Answer 2

können Sie zielen ungeraden und geraden Zeilen so, dass neue Zeilen unverwechselbar sind, wenn sie hinzugefügt:

div:nth-child(even) {background: #CCC} 
div:nth-child(odd) {background: #FFF} 

Sie auch einen Repeater mit SASS einrichten könnte/LESS n Anzahl der Objekte zielen, wie folgt aus:

@iterations: 10; 

.span-loop (@i) when (@i > 0) { 
       #drag-item-@{i} { 
        background: rbga(@i * 10, 25,25,1); 
       } 

      .span-loop(@i - 1); 
     } 

     .span-loop (@iterations);*/ 

Welche CSS-Selektoren für # Drag-item-0 bis zu # Drag Artikel-10