Nehmen wir an, ich verwende ein Plugin, das Inhalte chronologisch zu meiner Seite hinzufügt. Das Plugin gibt mir nicht die Kontrolle über die Menge der Elemente, die der Seite hinzugefügt werden, oder die Reihenfolge, in der sie der Seite hinzugefügt werden.
Lassen Sie uns also sagen, dass mein HTML so aussieht, nachdem 5 Elemente zur Seite hinzugefügt wurden:
%Vor%Ich möchte die Reihenfolge umkehren, so dass das neueste Element zuerst angezeigt wird, also verwende ich:
%Vor%Nun werden meine Artikel in dieser Reihenfolge angezeigt:
%Vor%Nehmen wir nun an, ich möchte nur maximal drei Elemente auf der Seite anzeigen. Wie kann ich das mit der neuen Sequenz machen, in der die Artikel angezeigt werden?
Wenn die Elemente nicht mit CSS reversiert werden, kann ich alles nach 3 Elementen entfernen:
%Vor%Aber da sie umgekehrt sind, entfernt das obige css die letzten zwei letzten Posts.
Ist CSS in der Lage, Kinder basierend auf der Reihenfolge zu entfernen, in der css sie neu angeordnet hat, oder muss ich js verwenden, um das HTML neu zu organisieren?
Wenn der :nth-child() -Wähler wie vorgesehen mit flex-direction: column funktioniert, dann ...
Der :nth-last-child() Selektor sollte mit flex-direction: column-reverse funktionieren:
E:nth-child(n)ein E-Element, das n-te Kind seines Elternteils
E:nth-last-child(n)ein E-Element, das n-te Kind seines Elternteils, beginnend mit dem letzten
Quelle: Ссылка
Tags und Links html css css3 css-selectors flexbox