Ein erster Einblick in CSS3s erster struktureller Selektor
Eine Sache, die ich an CSS3 mag, ist die neue Auswahl von Selektoren, mit der wir Elemente gezielt ansprechen können, ohne sich auf die Klasse, Ich würde oder ein anderes Elementattribut und eines, das wir hier behandeln werden, ist der folgende Selektor, : Ersttyp.
Das : Ersttyp Der Selektor zielt auf das erste untergeordnete Element des angegebenen Elements. Beispielsweise wird das darunter liegende Snippet das erste sein h2 auf der Webseite.
h2: first-of-type / * -Stildeklaration * /
Das : Ersttyp ist auch gleich nth-of-type (1), also nicht nur das auswählen zuerst von dem Typ können wir den zweiten, den dritten usw. weiter auswählen. Das folgende Snippet zielt auf das zweite h2 Element auf der Webseite.
h2: nth-of-type (2) / * -Stildeklaration * /
: Ersttyp” vs. “:erstes Kind”
Es scheint, als würden diese beiden Selektoren dasselbe tun, aber das ist nicht der Fall. Sehen wir uns die folgende Demonstration an:
Nehmen wir an, wir haben fünf Absatzelemente innerhalb eines div, so was:
Satz 1
Satz 2
Satz 3
Absatz 4
Satz 5
Nun möchten wir den ersten Absatz mit der auswählen :erstes Kind Wähler.
p: erstes Kind Auffüllen: 5px 10px; Grenzradius: 2px; Hintergrund: # 8960a7; Farbe: #fff; Grenze: 1px fest # 5b456a;
Und wie wir es erwartet haben, wurde der erste Absatz erfolgreich ausgewählt.
- : Erste-Kind-Demo
Wenn wir jedoch Fügen Sie zuvor ein anderes Element hinzu den ersten Absatz, sagen wir ein h1, wie der Ausschnitt unten:
Überschrift 1
Satz 1
Satz 2
Satz 3
Absatz 4
Satz 5
Der erste Absatz wird nicht ausgewählt, als erstes Kind in der div ist nicht mehr ein Absatz, ist aber jetzt ein h1.
Das ist also die Situation, in der die : Ersttyp Wahlschalter kommt, um das Problem zu lösen.
p: first-of-type padding: 5px 10px; Grenzradius: 2px; Hintergrund: # a8b700; Farbe: #fff; Grenze: 1px fest # 597500;
- : Erstklassige Demo
Das “Zuletzt” Wähler
Wo gibt es das? “zuerst”, dann wird es auch die geben “zuletzt”.
Die Umkehrung der zwei Selektoren, die wir oben besprochen haben, sind die folgenden zwei Selektoren; das :letztes Kind und das : letzte vom Typ. Sie sind im Grunde die gleichen wie die oben genannten, außer sie zielen auf die letztes untergeordnetes Element des angegebenen Elements.
Mit diesem Snippet wird beispielsweise der letzte Absatz innerhalb des div-Bereichs bestimmt.
p: last-child padding: 5px 10px; Grenzradius: 2px; Hintergrund: # 8960a7; Farbe: #fff; Grenze: 1px fest # 5b456a;
- : letztes Kind Demo
Und dieser Ausschnitt wird auch auf den letzten Absatz in derselben Situation abzielen, die wir oben erörtert haben. diesmal der folgt direkt ein anderes Element.
p: last-of-type padding: 5px 10px; Grenzradius: 2px; Hintergrund: # a8b700; Farbe: #fff; Grenze: 1px fest # 597500;
- : letzte Demo
Der Selectivizr
Wie alle anderen neuen Funktionen in CSS3 werden diese Selektoren hauptsächlich in alten Browsern nicht unterstützt Internet Explorer 6 bis 8, mit einer Ausnahme für die :erstes Kind Selector, wie er seit CSS2.1 hinzugefügt wurde. Es ist relativ das :letztes Kind wurde nur in CSS3 hinzugefügt.
Wenn also all diese Selektoren, die wir hier erwähnt haben, für Ihre Website wirklich erforderlich sind, können Sie eine aufgerufene JavaScript-Bibliothek verwenden Selectivizr um die Funktionalität dieses CSS3-Selektors zu emulieren.
Der Selectivizr ist für die Arbeit von anderen JavaScript-Bibliotheken abhängig, z. B. jQuery, Dojo, Prototype und MooTools. Aus der Vergleichstabelle auf der offiziellen Website ist ersichtlich, dass MooTools in der Lage ist, alle Selektoren zu bedienen.
Also fügen wir es zusammen mit dem Selectivizr wie folgt hinzu:
Der obige bedingte Kommentar stellt sicher, dass diese Bibliotheken nur in Internet Explorer 8 und darunter geladen werden.
Schließlich können Sie die Demo über die folgenden Links anzeigen. Sie sollte jetzt sowohl in modernen als auch in alten Browsern (IE8 und darunter) funktionieren. Sie können die Quelldatei auch zur weiteren Untersuchung herunterladen. Genießen.
- Demo
- Quelle herunterladen
