Ich habe mich gefragt, ob es eine bessere Lösung als das gibt, was ich gefunden habe, ohne die HTML-Struktur zu ändern
Die HTML-Struktur sieht so aus
%Vor%Es gibt also verschiedene DIVs auf derselben Ebene. Ich möchte jeden vierten Block anders färben, bis ein Teiler erscheint, dann müsste er neu erzählen.
Ich dachte, etwas wie .block:nth-child(4n) würde den Trick machen, aber es zählt tatsächlich die Elemente basierend auf dem Elternteil, nicht basierend auf der Klasse.
Hier ist das JSFiddle zum ausprobieren. Block # 4 und # 8 in jeder Zeile sollten unterschiedlich gefärbt sein Ссылка
Und so habe ich es zu einer Art Arbeit gemacht: Ссылка
Was ich getan habe, war, nach dem vierten Geschwister des .divider wie diesem .divider + .block + .block + .block + .block
Es funktioniert, aber ich müsste das gleiche für den 8., 12., 16., .. Block schreiben, was es nicht mehr automatisch macht.
Gibt es etwas wie .divider + .block:nth-sibling(4) oder .divider + .block:nth-of-class(4) ?
Vielleicht hat einer von euch eine Idee, wie man das löst, ohne den Quellcode zu ändern oder Javascript zu benutzen.
Eine solche Pseudo-Klasse würde nicht funktionieren, weil Sie es erwarten Elemente relativ zu einer anderen Verbindung Wähler zu entsprechen, was nicht ist, wie einfach Selektoren arbeiten. Wenn Sie beispielsweise einen komplexen Selektor geschrieben haben, der nur einen einzigen zusammengesetzten Selektor mit dieser Pseudo-Klasse (und keine Geschwister-Kombinatoren) enthält:
%Vor% Würdest du erwarten, dass dies .block:nth-child(4n) entspricht, überhaupt nicht übereinstimmt oder ungültig ist?
Es wäre schön, + .block + .block + .block + .block abkürzen zu können und es irgendwie zu wiederholen, aber leider ist es aufgrund der Konstruktion der Selektorsyntax einfach nicht möglich.
Sie müssen stattdessen JavaScript verwenden und / oder zusätzliche Klassen zu den entsprechenden Elementen hinzufügen.
Das Problem hierbei ist, dass sich :nth-of-type auf den Typ des Elements bezieht und sowohl .divider als auch .block Elemente des Typs <div> sind.
Was Sie wirklich brauchen, ist, dass .divider ein anderer Elementtyp ist als .block .
Auf dieser Basis, wenn die einzigen zwei untergeordneten Elemente von <div class="wrap"> sind:
<div class="divider"> <div class="block"> Ich wäre versucht, <div class="divider"> für <hr> - das thematische Break Element zu tauschen.
Dann können Sie verwenden:
%Vor% zum Stil .block .
Tags und Links css css-selectors