Wie können Sie verschachtelte Bilder individuell ausrichten?

Ich versuche, eine zufällige Reihe von Bildern basierend auf ihrer chronologischen Erscheinung auf der Seite mit CSS nur ohne HTML-Klassen (old demo) zu stylen.Wie können Sie verschachtelte Bilder individuell ausrichten?

Da alle Bilder in diesem Abschnitt Links sind, wickelte ich <a> ... </a> um die img Tags, aber jetzt sind die CSS-Auswahlen gebrochen!

I verschiedenen Selektoren versucht haben, aber alle defekt sind (nicht ausgewählt wurde, nicht korrekt Hintergrundfarbe angewendet):

sponsor img:nth-child(1) 
sponsor img:nth-of-type(1) 
sponsor a img:nth-child(1) 
a img:nth-child(1)

JSFIDDLE Demo der gebrochenen chronologischen Selektoren. Was habe ich übersehen? Vielen Dank!

Quelle

2017-07-17 Sam

Sie müssen nur Ihre img ersetzen: mit a: .. und fügen img nach nth-child() – Cam

'img' ist jetzt ein direktes Kind von deinem Anker nicht "Sponsor", es gibt nur ein Kind, denke es als "img: nth-child (1)" für jeden Anker. Also 'img: nth-child (n)' funktioniert nicht, wenn 'n! == 1'. Was Sie tun müssen, ist, Ihre Selektoren wie @ Garric15 unten in einer Antwort zu ändern. – Ricky

Durch das Umschließen Ihrer Bilder in einem <a> ... </a>-Tag ist img:nth-child(1) nicht gültig. Sie sollten die :nth-child Eigenschaft auf dem a-Tag statt:

sponsor a:nth-child(1) img{width:100%; background: Fuchsia} 
sponsor a:nth-child(2) img{width: 49%; background: YellowGreen} 
...

JsFiddle Demo

Quelle

2017-07-17 17:36:26 Garric15

Danke super, die Demo ist sehr übersichtlich und zeigt, wie man das richtig anwenden sollte! Werden diese "komplexen" CSS-Regeln moderne Browser nicht verlangsamen? – Sam

Die nth-child() pseudo-Klasse richtet sich an alle Kinder des gleichen Eltern.

Seit der img Elemente wurden die Kinder sponsor, nth-child() gearbeitet.

Aber wenn Sie jede img in ein Ankerelement wickelten, wurden sie Kinder von a und nicht mehr Kinder von sponsor. Daher ist nth-child() fehlgeschlagen.

Mit jedem img jetzt als das erste, letzte und einzige Kind von a vorhanden ist, Targeting sie mit nth-child() ist sinnlos.

Um Ihr Layout zu reparieren, muss nth-child() die neuen Kinder von sponsor – die Anker ausrichten.

Statt dessen:

sponsor img:nth-child(2)

Versuchen Sie folgendes:

sponsor > a:nth-child(2) > img

Quelle

2017-07-17 17:54:06

Danke @Michael_B für deine tolle Erklärung +1 sehr klar – Sam

@ Garric15, Gibt es auch eine Möglichkeit, die Stile für Kinder [1], [2-3], [4-5] und [6-9] zu gruppieren? mit anderen Worten, die Gruppierung der Selektoren 'n-te Kind (1) {} ',' n-te Kind (2-3) {} ',' n-te Kind (4-5) ',' n-te Kind (6-9) (Oder soll ich das als separate Frage stellen?) – Sam

Sam, gern geschehen. Ich bin froh, dass ich Ihnen helfen konnte. Was Ihre Frage in dem obigen Kommentar anbelangt, so ist das ein wenig kompliziert. Vielleicht möchten Sie eine neue Frage stellen. Siehe auch meine Antwort hier zur Orientierung. https: // Stapelüberlauf.com/a/45038349/3597276 –

Wie können Sie verschachtelte Bilder individuell ausrichten?

Antwort

Verwandte Themen