CSS :last-child
Ich habe eine div#content
mit vielen div.item
drin.
Bei der Verwendung von :last-child
um die letzten div.item
ohne border-bottom
ist, ist es OK.
Aber, der Inhalt ist dynamisch angehängt mit php und mysql-Ergebnisse ich bin mit einem bedingten Seitenumbruch Tabelle, die angehängt werden, nach der letzten div.item
was bedeutet, dass an der Unterseite des div#content
. Hier wird das problem sein, da die CSS - :last-child
erkennt nicht den letzten div.item
als letztes-Kind.
mein CSS sieht wie folgt aus:
div#content div.item:last-child {
border-bottom: none;
}
wie Sie sehen können ich bin zu definieren, dass das Letzte child-id solchen div.item
Irgendwelche Vorschläge bitte. vielen Dank im Voraus.
!!!!! Bitte beachten Sie, dass das problem nicht in der Tatsache, dass der Inhalt dynamisch ist, sondern in der Tatsache, dass die CSS :last-child nicht kennt div.Element als das Letzte Kind, sondern das Letzte element in dem div#Inhalt trotz sagen, die CSS, dass es:
div#content div.item:last-child
- Bitte beachten Sie, dass
:last-child
ist nicht unterstützt in IE. Welchen browser verwenden Sie? - Vit: Naja, wenn OP sagt, es funktioniert gut auf den ersten, er muss nicht mit IE.
- Sind Sie sicher, dass Sie nur Anhängen
div.item
auf der Kind-Ebene und nicht irgendetwas anderes?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einer Möglichkeit ich denken kann, ist, dass Sie anfügen von Elementen, die nicht
<div>
s und/oder nicht dieitem
Klasse. Überprüfen Sie die Ausgabe Ihres PHP/MySQL-Skript und sehen, ob es irgendwelche nicht-div.item
Elemente neben (in der DOM-Bedingungen) diediv.item
Elemente.Solche Elemente, die nicht mit dem Selektor:
Dieser Selektor findet nur
<div>
s mititem
Klasse, die das Letzte Kinddiv#content
.Hier ist ein Beispiel.
Vor dem anfügen
Nach anfügen
Was ausgewählt, was nicht, und warum?
Ausgewählt
Diese
<div>
element hat dieitem
Klasse, und es ist das Letzte Kind vondiv#content
.Es stimmt genau mit den oben genannten Selektor.
Nicht ausgewählt
Diese
<div>
element hat dieitem
Klasse, aber ist nicht das Letzte Kinddiv#content
.Es muss nicht exakt die oben genannten Selektor; es kann jedoch möglicherweise entsprechen entweder einer dieser Selektoren:
Nicht ausgewählt
Obwohl diese
<div>
element ist das Letzte Kind, es tut nicht haben dieitem
Klasse.Es muss nicht exakt die oben genannten Selektor; es kann jedoch möglicherweise entsprechen diese:
div#content div.item:not(.dont-want):last-of-type
würde nicht wie erwartet funktionieren?:not()
Verarbeitung immer nach:last-of-type
. Das bedeutet, dass die:last-of-type
element ist geprüft, dann verworfen, wenn es trifft die:not()
. Siehe diese geänderte jsFiddle-Beispiel.Scheint es Anhängen Elemente dinamically nicht die layout-engine erneut ausführen, einige CSS-Regeln wie :last-child.
Ich denke, Sie können re-Lesen, neu laden CSS-Datei machen, die Regel anzuwenden. Weiß nicht, es ist eine Vermutung.
Andere Möglichkeit ist dinamically legen Sie die Stile.
EDIT: Es scheint, Sie haben eine CSS-x-Browser-problem.
Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
könnten Sie verwenden Sie javascript zum aktualisieren der CSS. Siehe hier: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
Ein anderer Ansatz wäre die Nutzung einer Bibliothek wie jQuery und Feuer in dieser Zeile des Skripts jedes mal, wenn Sie neue divs. (oder vielleicht sind Sie mit einer anderen js-Bibliothek, wie Sie sagen, dass Sie dynamisch hinzufügen von divs auf der Seite)
müssen Sie möglicherweise zurückgesetzt Grenzen, bevor Sie die oben aber. d.h. die frühere "Letzte" div kann noch nicht über der Grenze unten. setzen Sie also alle Grenzen dann Feuer das Skript zum entfernen der Grenze für die letzten.