„Haben Sie jemals einige Eltern gesehen, die ihr ein Kind ignorieren, während der Rest spielt, weil dieses Kind das älteste oder so? Dies geschieht normalerweise mit dem ältesten Kind, weil die Eltern denken, dass es möglicherweise nicht so viel Aufmerksamkeit braucht. Wenn Sie dies getan haben, ist das Konzept des Nicht -ersten Typs für Sie nicht schwer zu verstehen. Der CSS First -Typ -Selektor wurde verwendet, um einfach das erste Kind eines bestimmten Elternteils zu ignorieren und den Rest der untergeordneten Elemente dieses bestimmten Elternteils auszuwählen. Mit anderen Worten, es muss jedes Element auswählen, das nicht der erste Nachkommen des übergeordneten Elements ist. Im Format der ersten Kinderkomponente wird es als Parameter angezeigt. In diesem Artikel werden wir heute lernen, das nicht erste Kindereigenschaften von CSS zu verwenden.”

Beispiel 01

Beginnen wir mit dem ersten Beispiel dieses Artikels, indem wir ein Standard -HTML -Dateiformat mit Tags erstellen. Wir haben dieses HTML -Skript mit dem HTML -Tag gestartet, auf das das Head -Tag folgt. Das Head -Tag definierte den Header unserer HTML -Webseite. Wir haben also das Titel -Tag verwendet, um den Namen für diese Seite hinzuzufügen. Nach der Schließung eines Titel -Tags haben wir das Titel -Tag im Kopf -Tag verwendet. Wir werden nach der Diskussion am Körper dieser HTML -Seite einen Blick auf das Kopf -Tag werfen.

Innerhalb des Body -Tags haben wir es mit der einfachen Überschrift der Größe 1 begonnen. Gleichzeitig haben wir die „DL“ verwendet, um eine Beschreibungsliste zu erstellen. Innerhalb dieser Beschreibungsliste wurden insgesamt 2 Beschreibungspezifikationen gemäß den „DT“ -Tags verwendet, die in Zeile 13 und 17 geöffnet und geschlossen werden. Die Definitionsbeschreibung „DD“ -Tags werden verwendet, um die Elemente aus einer Beschreibungsliste darzustellen, i.e., in den Zeilen 14, 15, 16, 18 und 19. Die Beschreibungsliste wurde nach dem Hinzufügen der Beschreibungselemente geschlossen. Der Körper unserer HTML -Seite wurde abgeschlossen. Also haben wir das Body -Tag geschlossen, ich.e., . Jetzt werden wir uns das Style -Tag unseres Mann -Kopf -Tags ansehen, um den Körper unseres HTML -Code zu stylen. Die Beschreibungsspezifikation „DT“ wurde mit dem Schriftgewicht der fetten, großen Schriftgröße, der Serifenhandfamilie und der Schriftgröße von 25px gestaltet. Die Definitionsbeschreibungs -Tags werden mit dem 4PX -Rand und der Schriftgröße von 22px gestaltet.

Für die "DD" -Tags haben wir den "nicht" (ersten Typ "-Antyp verwendet, um alle seine Kinder außer dem ersten unmittelbaren Kind zu stylen. Wir haben die Schriftgröße von 18px und den Rand des 3px-Feststoffs der gelbgrünen Farbe hinzugefügt. Jetzt würde dieses Styling nur auf die übrigen Kinder -Tags des „DD“ -Tags angewendet werden, ohne dass sein erstes Kind oder Mitglied gestylt wird. Hier geht es um das Style -Tag und diese HTML -Seite. Wir müssen es also speichern und dann mit der Ausführungsoption des Visual Studio -Code ausführen.

Nachdem wir dieses HTML -Skript im Chrome -Browser ausgeführt haben, haben wir unterhalb der Ausgabe der Beschreibungsliste gezeigt. Die Überschrift wurde ohne Styling angezeigt, während die Beschreibungsliste insgesamt zwei Beschreibungsspezifikationen Hauptlistenelemente angezeigt hat.e., Tiere und Meerestiere. Die Hauptbeschreibungsspezifikationen sind größer als der Rest der Listenelemente, die im Style -Tag angegeben sind. Gleichzeitig wurden die Definitionsbeschreibungen der „DD“ unterschiedlich gestaltet.

Der Artikel neben Nummer 1 ist etwas größer als der Rest der Artikel. Zusammen mit dem wurden alle Gegenstände einen gelbgrünen Farbrand um sie herum erhalten, aber das erste Element blieb unverändert, da es das erste Kind ist und es gemäß dem nicht erstmals erstmals im Stil verwendeten CSS-Offset vermieden werden sollte Schild.

Beispiel 02

Beginnen wir mit einem weiteren Beispiel für CSS, nicht mit einem Auswahltyp für den Offset-Selektor, zusammen mit anderen Selektoren, um einen Vergleich zu machen. Also haben wir diesen HTML -Code mit dem Standard -HTML -Format von Tags gestartet, i.e., Ausgehend von einem einfachen HTML -Tag, gefolgt vom Kopf- und Körper -Tag. Wir werden einen Blick auf den Hauptkörperteil dieses HTML -Skripts durch das Body -Tag werfen, ich.e., . Es beginnt mit der Verwendung von Heading -Tag

der größten Größe, und es schließt

mit einigen Text in beiden Tags.

Danach enthält es einen Abschnitt „Div“, um einen neuen Container im HTML -Körperbereich zu erstellen, wobei die Klasse „Eltern“ für das Styling verwendet wird. Dieser Div -Container hätte einige Absätze und Überschriften darin. Die Überschrift dieses Behälters wäre von Größe 1, beginnend mit

und enden mit

. Danach enthält es insgesamt 4 Absätze darin mit der Verwendung des Starts

Tag und Ende

Schild. Nachdem alle Absätze abgeschlossen und geschlossen wurden, haben wir das Tag verwendet, um den Container zum weiteren Einfügen von Elementen hier zu schließen. Der Körper dieses HTML -Tags wurde hier abgeschlossen, da es das Tag verwendet hat, um den Körperteil zu schließen. Schauen wir uns den Kopfzeilen dieser HTML. Danach haben wir das "Stil" -Tag von HTML -CSS verwendet, um dem Körper unserer HTML -Seite ein gewisses Design zu verleihen. Es wurde also mit der Klasse „Eltern“ und dem Selektor „First-Kind“ begonnen, um dem ersten Kind des jeweiligen Elements „Div“, das mit der Klasse „Eltern“ angegeben wurde, ein Styling hinzuzufügen.

Jetzt würde die Überschrift dieses „DIV“. Wir haben das Absatz-Tag „P“ mit dem einzigartigen Selektor verwendet, um dem ersten Absatz aus den restlichen Absätzen ein Styling zu verleihen. Es würde einen Hintergrund von blanchierten Mandeln und eine Schriftgröße von 2 enthalten.25em. Jetzt wird die gleiche übergeordnete Klasse mit dem Selektor „Nicht (: Erst von Typ)“ verwendet, um die gleiche Art von Kinderelementen zu stylen, ich.e., "P" außer dem ersten Kind des "Div" -Containers. Alle diese Elemente wären seegrün mit größeren Schriftgrößen und verschiedenen Schriftfamilien.

Außerdem wurde der letzte Kind ausgewählt, um das letzte Kind des Abschnitts „Div“ zu stylen, der ebenfalls ein Absatz ist. Es wird mit einem normalen Schriftstil und einer anderen Schriftfamilie orange gefärbt. Das Styling wurde hier abgeschlossen. Jetzt werden wir es ausführen, um die Änderungen zu sehen.

Die Ausgabe zeigt kein Styling für die erste Überschrift, schräg gestaltete blau gefärbte erste Überschrift „Div“, der erste Absatz würde mit dem hellrosa Hintergrund gestaltet, die nächsten beiden Absätze werden mit seegrüner Farbe gefärbt und der letzte Absatz ist farbiger Orange.

Abschluss

Dieser Artikel enthält eine kurze Erläuterung des CSS-Selektors, nicht des erstmaligen Typs. Zu diesem Zweck haben wir seine Verwendung und Anwendung auf CSS -Elementen innerhalb des Einführungsabsatzes erörtert. Danach haben wir es in einigen Beispielen des HTML -Skripts implementiert, um seine Arbeit zu zeigen. Darüber hinaus haben wir ihren Vergleich mit einigen Geschwister -Selektoren behandelt, um es klarer und prominenter zu machen.