Gibt es eine Möglichkeit Attributwerte in nth-child(n) zur Ausgabe das Ergebnis der Verwendung von n zu erhöhen: couldcss Schritt n-Kind Attributwerte
div:nth-child(1){
top: -5px;
}
div:nth-child(2){
top: -10px;
}
div:nth-child(3){
top: -15px;
}
div:nth-child(4){
top: -20px;
}
div:nth-child(5){
top: -25px;
}
Sie, wenn Sie eine preprocessor wie sass verwenden.
Ein Beispiel:
div {
$var: 5;
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
top: -#{$var}px;
$var: $var + 5;
}
}
}
Eine Demo: http://sassmeister.com/gist/7d7a8ed86e857be02d1a
Ein anderer Weg, dies zu erreichen:
div {
$list: 1 2 3 4 5;
@each $i in $list {
&:nth-child(#{$i}) {
top: -5px * $i;
}
}
}
Eine Demo: https://www.sassmeister.com/gist/fb5ee7aa774aafb896cd71a828882b99
Können Sie ein Foreach-Äquivalent der Anweisung posten, wenn die Nummer dynamisch ist? –
Aber das funktioniert nur, wenn Sie wissen, dass Sie 5 Elemente haben. Was passiert, wenn Elemente dynamisch hinzugefügt werden? – Kokodoko
SCSS wird immer in CSS übersetzt, so dass Sie keine dynamische Variable haben können. Ich nehme an, du suchst nach einem CSS, nur um so etwas wie 'n-Kind (n + 1) {top: -5px * n}' zu erreichen, aber das wird leider nicht funktionieren. –
Es ist, wenn Sie verwenden, um eine 'Präprozessor 'wie' sass' zum Beispiel –
... sonst ... NEIN. –
... oder füge es mit jquery: $ ('div') hinzu jeder (Funktion (i = 1) {$ (this) .css ("top", -5 * i); i ++;}); –