Es kann manchmal wünschenswert sein, den oberen oder linken Rand vom ersten Element in einem Container zu entfernen. Ebenso den rechten oder unteren Rand vom letzten Element in einem Container. Dies kann man durch manuelles Anwenden von Klassen auf das HTML erreichen.
.first { margin-top: 0 !important; margin-left: 0 !important; }
.last { margin-bottom: 0 !important; margin-right: 0 !important; }Das „Nullen“ von „oben“/„unten“ ist nützlich bei einem vertikalen Stapel von Elementen, das „Nullen“ von „links“/„rechts“ ist nützlich für horizontale Reihen (im Allgemeinen). Aber… diese Methode hängt davon ab, dass Sie selbst Klassen auf das HTML anwenden. Pseudo-Selektoren können ein besserer, weniger aufdringlicher Weg sein.
* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }Möglicherweise möchten Sie das * durch spezifischere Selektoren ersetzen, je nach Ihren Bedürfnissen.
„Jedes Dritte“, usw.
Nehmen wir an, Sie hätten einen schwebenden Block von 9 Elementen, 3 mal 3. Es ist sehr üblich, dass Sie möglicherweise den rechten Rand von den 3., 6. und 9. Elementen entfernen müssen. Der nth-child Pseudo-Selektor könnte hier helfen.
* > :nth-child(3n+3) { margin-right: 0; }Die Gleichung dort, 3n+3, funktioniert so:
(3×0)+3 = 3
(3×1)+3 = 6
(3×2)+3 = 9
usw.
jQuery
jQuery verwendet CSS3-Selektoren, die :first-child, :last-child und :nth-child() beinhalten. Das bedeutet, dass diese in Browsern, die diese Selektoren nicht oder nicht vollständig unterstützen, in jQuery funktionieren werden, sodass Sie die CSS-Unterstützung durch JavaScript-Unterstützung ersetzen können. Zum Beispiel:
$("* > :nth-child(3n+3)").css("margin-right", 0);Browser-Unterstützung
:first-child und :last-child funktionieren in der neuesten Version aller großen Browser, aber nicht in IE 6. :first-child wird in IE 7+ unterstützt. :nth-child funktioniert in Safari 3+, Firefox 3.5+ und Chrome 1+, aber immer noch nicht in IE8.
Siehe auch David Olivers Artikel.
Und was ist mit Browsern ohne JS? Sie übertragen die Verantwortung für CSS auf JS, was meiner Meinung nach genauso schlecht ist wie das Einbetten in HTML.
Ein cooler Trick trotzdem, aber nicht für die Arbeit geeignet. In meinen persönlichen Projekten werde ich ihn verwenden.
JQuery ist die beste Option.
Es funktioniert in jedem Browser.
Danke Chris für den Tipp.
Hallo Chris
Vielen Dank, jQuery funktioniert gut. Ich mag Ihren Blog, er ist sehr hilfreich für mich bei CSS und jQuery.
Vielen Dank nochmals.
Ich bin mir nicht sicher, warum es
anstatt als
Weil, wenn ich benutze
es stimmt nicht mit dem überein, was ich denke, dass es tun wird (die erste H1 in einem div). Aber wenn ich benutze
es funktioniert.
Gedanken?
H1 > :first-child
bedeutet „Finde mir alle Elemente, die das erste Kind eines H1-Elements sind“.
H1:first-child
bedeutet „Finde mir alle H1-Elemente, die die ersten Kinder irgendeines Container-Elements sind“.
Es gibt einen feinen Unterschied zwischen ihnen. First child verwirrt viele Leute auf diese Weise (ich weiß, ich fand es anfangs etwas verwirrend, als ich damit anfing), aber es ergibt Sinn, wenn man darüber nachdenkt.
Tatsächlich, wenn sich ein Element über dem H1 in Ihrem DIV befindet, funktioniert H1:first-child ebenfalls nicht. In diesem Fall benötigen Sie H1:first-of-type.
Der > Selektor ist der Kind-Selektor. Er wählt alle direkten Nachfahren des vorhergehenden Selektors aus.
Es gibt eine gute Erklärung hier
http://meyerweb.com/eric/articles/webrev/200006b.html
Ich muss sagen, vielen Dank, das hat mir sehr geholfen!!! Ich wollte es für Rahmen anstelle von Rändern verwenden und es hat perfekt funktioniert.
Ich muss sagen, dass die Empfehlung, jQuery zu verwenden, ohne die Nachteile zu erwähnen, ziemlich kontraproduktiv ist, da sie impliziert, dass alle Probleme mit jQuery gelöst werden können. Dies fördert einfach schlechte Praktiken, da viele Leute dazu neigen, Dinge von vornherein nicht richtig zu machen, sie „fixen“ Dinge nur mit jQuery – auf Wiedersehen progressive enhancement.
Durch meine langjährige Tätigkeit als Moderator auf CodingForums.com habe ich viele Leute gesehen, die nicht einmal vollständig verstehen, was jQuery eigentlich ist (weil es all die JavaScript-Dinge so einfach macht, dass selbst die unwissendsten Leute es benutzen können — und viele verwenden diese 32KB-Bibliothek sogar für die kleinsten Dinge, die mit ein oder zwei Zeilen normalem JS geschrieben werden könnten) und indem sie ihnen mit unkommentierten (im Sinne von Bildung) Code-Schnipseln von jQuery konfrontieren, um browserübergreifende Probleme zu lösen, lernen sie es letztendlich nicht (wie wir in den beiden Kommentaren oben sehen können).
Vielleicht lese ich es falsch, aber der Abschnitt Browser-Unterstützung scheint falsch zu sein.
Ich lese das so, dass ':last-child' in allen großen Browsern außer IE6 funktioniert, einschließlich IE7 und IE8. Ich bin mir bei IE7 nicht sicher, aber meine Erfahrung ist, dass IE8 ':last-child' nicht unterstützt.
Diese einfache Formel hat mir den Tag gerettet! Für die Anzeige von Portfolio-Elementen in zwei oder drei Reihen muss ich dringend den Rand vom letzten Element entfernen. Diese Formel erledigt den Trick! Kudos.
Danke! Genau das, was ich brauchte.
Hallo Leute, ich dachte, ich teile eine Methode, die den Bedarf, jeden Rand zu entfernen, den ich seit vielen Jahren benutze, umgeht.
Also gehen alle Ihre schwebenden Blöcke/Divs/Elemente in einen Container-Div, der eine zusätzliche Breite zugewiesen bekommen hat, damit er den überlaufenden Rand des letzten Elements in jeder Reihe aufnehmen kann, und verwenden Sie dann negativen margin-right, um die Breite dieses Containers wieder in Ihre Gesamtbreite zurückzubringen, und das alles, ohne das letzte Element der Reihe in die nächste Reihe zu schieben.
Siehe hier: http://jsbin.com/cakayeca/3/edit
Vielen Dank für diese Antwort. Ich konnte keine andere Lösung für mein Problem finden, außer Ihrer.
Gott segne Sie und behüte Sie :).
Ich musste „> *:first-child“ verwenden, damit es funktioniert.
:nth-child(4n+3) { margin-right: 0px;}
Für die vierte Spalte in einer Reihe
Dieses CSS funktioniert.