last-child und last-of-type funktioniert nicht im SASS
Wie würden Sie schreiben, dies SASS-konform?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Grundsätzlich bin ich einfach replizieren diesem Beispiel von fading in einem Bild über ein anderes (gefunden hier.)
Seine JFiddle Beispiel: http://jsfiddle.net/Xm2Be/3/
Aber sein Beispiel ist gerade die CSS, ich arbeite an einem Projekt in SASS-und bin nicht sicher, wie Sie korrekt zu übersetzen.
Mein Code
Hinweis: in meinem Beispiel unten, die img-hover funktioniert nicht richtig (die beiden Bilder zeigen und keine rollover-fadein Aktion)
Meine CodePen:
http://codepen.io/leongaban/pen/xnjso
Versuchte ich
.try-me img:last-child & .tryme img:last-of-type
Aber : wirft SASS kompilieren Fehler, der code unten funktioniert
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
Aber es spuckt CSS, die hilft mir nicht:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Arbeiten Codepen:
http://codepen.io/leongaban/pen/xnjso
Du musst angemeldet sein, um einen Kommentar abzugeben.
Schachtelung ist nicht eine Anforderung mit Sass. Fühlen sich nicht verpflichtet, dies zu tun, wenn es gibt keine Notwendigkeit zu brechen, bis die Selektoren.
Wenn Sie die Anwendung von Stilen auf das Bild und dann die spezifischen Stile, um die last-of-type, dann ist es das, was es Aussehen würde, wenn Sie verschachteln:
Keiner der oben genannten für mich gearbeitet, so.
last-of-type
nur spielt schön mit den Elementen, die Sie auswählen können, die Dinge mit den Klassen, was Sie wollen, aber diese wird behandelt durch die Elemente. So sagen, Sie haben die folgende Struktur:Man die Letzte div mit der Klasse
middle
funktioniert nicht mitlast-of-type
.Mein workaround war, ändern Sie einfach die Art von element, das
somethingelse
warHoffe es hilft jemand aus, ich brauchte eine Weile, um das herauszufinden.
Hey, warum nicht Sie nur CSS? Sie könnten entfernen Sie alle JS, ich meine, schweben zu können, ist die Unterstützung direkt zurück zum ie6. Ich vermutete, dass Sie wissen, gibt es kein hover-Ereignis nur aktiv auf tablets..
Ich meine, Sie müssen einen Bereich für das Bild.. Aber ich finde es voll ausnutzen, vor allem, wenn Sie wollen ein href.
http://codepen.io/Ne-Ne/pen/xlbck
Nur meine Gedanken..