CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)
|
Vorwort Ich habe vor Kurzem :first-child in einem Projekt verwendet und es fiel mir sofort ein, ja. Ist das nicht einfach die Auswahl des ersten Elements? Es scheint sehr nützlich zu sein und ich habe bei der täglichen Verwendung keine Probleme. Ich denke natürlich, dass es nur das erste Element unter dem übergeordneten Element auswählt und keine Auswirkungen auf Enkel- und Urenkelelemente hat. Es stellte sich heraus, dass ich falsch lag. Das erste Missverständnis von E:first-child (es wird nur einer der von mir angegebenen Bereiche ausgewählt und nicht durchlaufen, wie viele Enkel- oder Urenkelelemente es gibt)
<!DOCTYPE html>
<html>
<Kopf>
<Stil>
Körper p: erstes Kind
{
Hintergrundfarbe: gelb;
}
</Stil>
</Kopf>
<Text>
<p>Dieser Absatz ist das erste untergeordnete Element seines übergeordneten Elements (Textkörper). </p>
<h1>Willkommen auf meiner Homepage</h1>
<p>Dieser Absatz ist nicht das erste untergeordnete Element seines übergeordneten Absatzes. </p>
<div>
<p>Dieser Absatz ist das erste untergeordnete Element seines übergeordneten Elements (div). </p>
<p>Dieser Absatz ist nicht das erste untergeordnete Element seines übergeordneten Absatzes. </p>
</div>
<p><b>Hinweis:</b> Für :first-child in IE8 und früheren Browsern ist die <!DOCTYPE>-Deklaration erforderlich. </p>
</body>
</html>Funktioniert der obige Code wirklich nur mit einem p-Tag?
Dies ist das erste häufige Missverständnis, das wir gemacht haben, als wir dachten, dass body p:first-child das erste Element auswählt. Tatsächlich wird dieses p ausgewählt, solange es das erste in seinem übergeordneten Element im von uns ausgewählten Textkörper ist. Das zweite Missverständnis von E: erstes Kind (egal wie viele Brüder vor diesem E-Element stehen, solange ich das erste E-Element bin, werde ich wirksam)
Es handelt sich immer noch um den obigen Code, aber wir haben vor dem p-Tag im Textkörper ein Font-Tag hinzugefügt und festgestellt, dass p ungültig ist. :first-child ist ein Selektor, der das erste untergeordnete Element seines übergeordneten Elements auswählt. Wie wähle ich nur die Unterelemente eines bestimmten Elements aus? Ganz zu schweigen davon, wie viele Enkel und Urenkel Sie haben. Untergeordneter Selektor (>): kann nur Elemente auswählen, die untergeordnete Elemente eines bestimmten Elements sind (direkte untergeordnete Elemente), ausgenommen Enkel, Urenkel usw. Nehmen Sie den obigen Code als Beispiel und fügen Sie > hinzu, um den Effekt auszuprobieren
Manchmal wird der falsche Selektor verwendet, ohne dass ein Fehler gemeldet wird. Aber falsch ist falsch. Es wird immer eine Zeit geben, die es zu entdecken gilt. Dies ist das Ende dieses Artikels über die Auswahl des ersten untergeordneten Elements unter dem übergeordneten Element (:first-child) durch CSS. Weitere relevante CSS-Elemente für das erste untergeordnete Element unter dem übergeordneten Element finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: SASS Style Programmierhandbuch für CSS
>>: Beispielcode zum Setzen von Hotlinks und Koordinatenwerten für Webbilder
Artikel empfehlen
Wie melde ich mich per Remote-Zugriff bei der MySql-Datenbank an?
Einführung: Manchmal müssen wir zur Entwicklung e...
MySQL SHOW PROCESSLIST unterstützt den gesamten Prozess der Fehlerbehebung
1. SHOW PROCESSLIST-Befehl SHOW PROCESSLIST zeigt...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen zur Vue.js-Quellcodeanalyse
Vorwort Zusätzlich zu den standardmäßig integrier...
Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout
Dieser Artikel stellt das Flex-Layout vor, um ein...
So installieren Sie die MySQL-Server-Community-Version MySQL 5.7.22 winx64 in win10
Herunterladen: http://dev.mysql.com/downloads/mys...
Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?
Viele Organisationen müssen Dateiserver sichern u...
Code zur Implementierung eines einfachen Pfeilsymbols mit Div+CSS in HTML
Beim Webdesign verwenden wir Pfeile oft als Dekor...
Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen
Inhaltsverzeichnis Überblick in Operatorverfeiner...
Dieser Artikel hilft Ihnen, den Lebenszyklus in Vue zu verstehen
Inhaltsverzeichnis 1. vorErstellen & erstellt...
So ändern Sie die Standardcodierung von MySQL in Linux
Wenn während des Entwicklungsprozesses nach der W...
Einige Vorschläge zur Lesbarkeit des Vue-Codes
Inhaltsverzeichnis 1. Nutzen Sie Komponenten sinn...
Nginx-Lastausgleichskonfiguration, automatischer Umschaltmodus bei Ausfallzeiten
Streng genommen verfügt nginx nicht über eine Int...
Detaillierte Erläuterung der Protokollverarbeitung von Docker-Containern
Docker verfügt über viele Log-Plugins. Standardmä...
Erste Schritte: Eine kurze Einführung in die grundlegenden Tags und Attribute von HTML
HTML besteht aus Tags und Attributen, die zusamme...
Tutorial zur Installation und Konfiguration des mysql8.0-ZIP-Pakets für Windows x64
Zip-Installationsschritte für die MySQL 8-Windows...